Menu horizontal

Nous pouvons aussi avoir un menu1 horizontal. Mais Nescape 4, Opera 5 et IE 4 ne seront pas en mesure de l'afficher correctement.

Il nous faut toujours deux feuilles de style :
pagecss2nn4.css contenant les règles qui sont ignorées ou correctement interprétées par nn4.
pagecss2.css avec les nouvelles règles et ce qui pose problème.
On a ajouté ce qui est nécessaire à MSIE 5 et 5.5, ici encadré par des commentaires conditionnels.
Ce ne sont plus quelques filtres ou "hacks" qui vont permettre la compatibilité, mais des commentaires conditionnels qui devraient permettre une mise à jour plus facile lors de l'arrivée de MSIE 7.
De plus, comme ce qui est entre ces commentaires n'est pas examiné par le validateur W3C, la syntaxe sera validée.
On définit maintenant menu_horizontal :

<link rel="stylesheet" href="pagecss2nn4.css" type="text/css" />
<style type="text/css">
<!--
/*<![CDATA[*/
   /*n'est pas interprété par nn4 ou ie4*/
@import "pagecss2.css";/*écrase les styles précédemment définis*/
/*modifications à apporter mais plutôt dans 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>
pour toutes les versions de MSIE
<!--[if IE]>
<style type="text/css">
#menu_horizontal ul li a{
height:0;
}
</style>
<![endif]-->
pour toutes les versions avant MSIE 7
<!--[if lt IE 7]>
<style type="text/css">
#menu_horizontal ul{
position:absolute;/*utile avec MSIE 7 beta*/
}
</style>
<![endif]-->
pour toutes les versions avant MSIE 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]-->
pour MSIE 5 et 5.5 largeur du menu
<!--[if lt IE 6]>
<style type="text/css">
#menugauche li a{
width:155px;
}
pour MSIE 5 et 5.5 menu horizontal fixe
#menu_horizontal ul{
top:expression(body.scrollTop + 0 + "px");
}
</style>
<![endif]-->

CSS uniquement, "pas de filtres ou hacks", pas de tableau ni javascript.
Voilà ce qui semble possible2, mais qui reste réservé aux navigateurs récents.

Et pour IE6.

1 CSS cutting edge propose d'autres solutions sans liste pour des menus horizontaux et verticaux.
1 Autres solutions pour des menus horizontaux et verticaux.
2 Si le mode "quirks" de IE6 vous convient, devnull propose d'autres solutions pour IE5, 5.5 et 6.