Horizontal menu

We can also have a horizontal menu1. But Nescape 4, Opera 5 and IE 4 will not be able to display it correctly.

We still need two stylesheets:
pagecss2nn4.css with the rules that are ignored or correctly interpreted.
pagecss2.css with the new rules and what generates display problems.
We will have the few hacks for MSIE 5 and 5.5.
We will create a div to hold the links: menu_horizontal.

<link rel="stylesheet" href="pagecss2nn4.css" type="text/css" />
<style type="text/css">
<!--
/*<![CDATA[*/
   /*is ignored by nn4 or ie4*/
@import "pagecss2.css";/*overwrites previously defined styles*/
/*hacks to add here or in pagecss2nn4*/
#menugauche li{
margin-top:0;
border-bottom:0;
border-top:1px solid #90BADE;
margin-bottom:-5px;
border-bottom/*hide from IE5.0/Win from here*/:1px solid #90BADE;
margin-bottom:-1px;
}
* html #menugauche li a{
width:155px;
w\idth:135px;/*hide from IE 5.x*/
}
/*We rewrite what has not been modifed in pagecss2nn4*/

#content{
margin-top:2.2em;/*for IE 5.0*/
margin-top/*hide from IE5.0/Win from here*/:2em;
}
/*We use here the same techniques as the ones of the menu on the left.
  We set the menu at the top on the left if we wish.
  We add nowrap to avoid wrapping of an item if the screen is too small
  On overflow, IE 5.01 will wrap the menu*/
#menu_horizontal ul{
top:0;
  /*
  top:expression(body.scrollTop + 0 + "px");
  allows a fixed position of the menu with IE5 and 5.5
  but CSS will no longer validate!
  */
left:157px;/*0 if we want to use the whole width*/
position:absolute;
white-space:nowrap;
background-color:transparent;
color:#0A00B0;
/*width:83%;*//*to be uncommented if we want to use the whole width*/
margin:.3em 0 0 0;
padding:2px 3px 0 0;
padding-bottom:/*for IE5.5 and IE6, hide from IE5.0*/2px;
border:1px solid #90BADE;
}
/*For Mozilla and Opera we can use a fixed position*/
html>body #menu_horizontal ul{
position:fixed;
background-color:#C9DDE4;
}
/*Here we apply inline to override the default value for ul (block)
  That's what will allow us to display all the links within the same line*/
#menu_horizontal ul li{
display:inline;
}
/*We do the same as as we did in the previous pages for the menu on the left
  to display the links and animate.
  In this context IE5 does not interpret border, margin, padding
  except with height:0;*/
#menu_horizontal ul li a{
font-weight:800;
background-color:#D2E1FB;
text-decoration:none;
border-left:6px solid #E9F5FE;
border-right:6px solid #E9F5FE;
margin-right:-3px;
margin-left:0;
padding:2px 7px 2px 7px;
margin-bottom:-4px;/*for IE5.0*/
height:0;
}
#menu_horizontal ul li a:hover{
background-color:#A9CFFE;
color:#FFFFFF;
border-left:8px solid #5200A4;
border-right:8px solid #5200A4;
border-bottom:2px solid #E9F5FE;
border-top:2px solid #E9F5FE;
padding:0 5px 0 5px;
}

/*]]>*/
-->
</style>

Only CSS, no table and no javascript.
Here is what we may do2, but it is for recent browsers only.

MSIE 7 may bring surprises as it should read html > body, body > element, head:first-child + body and stop interpreting * html.
If it becomes real, using conditional comments for the differents versions of MSIE will become the wisest solution.

Now with IE6.

1 CSS cutting edge proposes other cross-browser solutions without lists for vertical and horizontal menus.
1 Other solutions for horizontal and vertical menus.
2 Triggering quirks mode for IE6 can allow you to use devnull solutions for IE5, 5.5 and 6.