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 conditional comments instead of the few hacks for MSIE 5 and 5.5. It should make updating easier for MSIE 7.
Moreover, as the W3C validator does not analyse what is between the comments, the page will be valid CSS.
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*/
#menu_horizontal ul{
margin:.3em 0 0;
top:0;
left:157px;
position:absolute;
white-space:nowrap;
background-color:transparent;
color:#0A00B0;
padding:2px 3px 2px 0;
border:1px solid #90BADE;
}
#menu_horizontal ul{
background-color:#C9DDE4;
position:fixed;
}
#menu_horizontal ul li{
display:inline;
}
#menu_horizontal ul li a{
font-weight:bold;
background-color:#D2E1FB;
border-left:6px solid #E9F5FE;
text-decoration:none;
border-right:6px solid #E9F5FE;
margin-right:-3px;
margin-left:0;
padding:2px 7px 2px 7px;
}
#menu_horizontal ul li a:hover{
background-color:#A9CFFE;
color:#FFF;
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;
}
#menugauche li{
margin-top:0;
border-bottom:0;
border-top:1px solid #90BADE;
border-bottom:1px solid #90BADE;
margin-bottom:-1px;
}
#content{
margin-top:2em;
}
/*]]>*/
-->
</style>
For any version of MSIE
<!--[if IE]>
<style type="text/css">
#menu_horizontal ul li a{
height:0;
}
</style>
<![endif]-->
For less than MSIE version 7
<!--[if lt IE 7]>
<style type="text/css">
#menu_horizontal ul{
position:absolute;/*but not fixed yet by MSIE 7 beta*/
}
</style>
<![endif]-->
For less than MSIE version 5.5
<!--[if lt IE 5.5]>
<style type="text/css">
#menugauche li{
border-bottom:0;
margin-bottom:-5px;
}
#content{
margin-top:2.2em;
}
#menu_horizontal ul{
padding-bottom:0;
}
#menu_horizontal ul li a{
margin-bottom:-4px;
}
</style>
<![endif]-->
For less than MSIE version 6 - width of menu on the left
<!--[if lt IE 6]>
<style type="text/css">
#menugauche li a{
width:155px;
}
fixed horizontal menu with versions 5.x
#menu_horizontal ul{
top:expression(body.scrollTop + 0 + "px");
}
</style>
<![endif]-->

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

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.