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.
Quelques filtres ou "hacks" vont permettre la compatibilité.
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*/
#menugauche li{
margin-top:0;
border-bottom:0;
border-top:1px solid #90BADE;
margin-bottom:-5px;
border-bottom/*ignoré par IE5.0/Win à partir d'ici*/:1px solid #90BADE;
margin-bottom:-1px;
}
* html #menugauche li a{
width:155px;
w\idth:135px;/*n'est pas interprété par IE 5.x*/
}
/*on redéfinit ce qui n'a pas été modifié dans pagecss2nn4*/

#content{
margin-top:2.2em;/*pour IE5*/
margin-top/*ignoré par IE5.0/Win*/:2em;
}
/*On utilise ici les mêmes techniques que pour le menu à gauche
  On positionne en haut à gauche si on le souhaite
  On ajoute nowrap pour éviter un passage à la ligne si l'écran est trop petit
  (sauf avec IE 5.01)*/

#menu_horizontal ul{
top:0;
  /*
  top:expression(body.scrollTop + 0 + "px");
  permet une position du menu fixe avec IE5 et 5.5
  mais CSS ne sera plus valide !
  */
left:157px;/*0 peut permettre d'utiliser toute la largeur*/
position:absolute;
white-space:nowrap;
background-color:transparent;
color:#0A00B0;
/*width:83%;*//*peut permettre d'utiliser toute la largeur*/
margin:.3em 0 0 0;
padding:2px 3px 0 0;
padding-bottom:/*pour IE5.5 et IE6 ignoré de IE5.0*/2px;
border:1px solid #90BADE;
}
/*Pour Mozilla et Opera position fixe haut gauche
  et on definit la couleur de fond*/
html>body #menu_horizontal ul{
position:fixed;
background-color:#C9DDE4;
}
/*Ici on écrase la définition par défaut de ul : display:block;
  C'est ce qui va permettre d'afficher tout sur une même ligne*/
#menu_horizontal ul li{
display:inline;
}
/*On procède comme avec le menu de gauche pour afficher les liens
  et animer.
  Dans ce contexte IE5 n'interprète pas border, margin, padding
  sauf avec 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;/*pour 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>

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

MSIE 7 risque de bouleverser les choses car il devrait lire html > body, body > element, head:first-child + body et ne plus lire * html.
Si cela se confirme, utiliser des commentaires conditionnels pour les différentes versions de MSIE deviendra l'option la plus raisonnable.

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.