Un menu compatible tous navigateurs ?

Bonjour à toutes et à tous,

Je sollicite votre avis sur un petit menu CSS - Javascript résultant de choses glanées de gauche à droite + ma petit touche perso (cf. onmouseover onmouseout, pas très orthodoxe mais bien pratique). Celui-ci à l'avantage de fonctionner sur IE ainsi que sur Firefox. Je n'ai pas encore eu l'occasion de le vérifier sous les autres navigateurs mais je pense qu'à partir du moment où javascript est activé (exit 8% des internautes donc), il ne devrait pas y avoir de problème.

- le code HTML:

<div id="Entete">
<ul class="Niveau1">
<li><span>Menu1</span></li>
<li onmouseover="this.className='LIOVER';" onmouseout="this.className='';"><span>Menu 2</span>
                        <ul class="Niveau2">
<li onmouseover="this.className='LISOVER';" onmouseout="this.className='';"><a href="#">Sous Menu 2</a></li>
 <li onmouseover="this.className='LISOVER';" onmouseout="this.className='';"><a href="#">Sous Menu 2</a></li>
</ul>
</li>
...
</ul>
</div>

- les styles associés

#Entete
{
z-index:1;
position:absolute;
width:100%;
height:25px;
left:0;top:0;
background:url(MenuFond.gif) repeat-x left top;
}

/* ----------------- MISE EN FORME DE L'ENTETE ---------------- */
#Entete ul,li
{
padding:0px;
margin:0px;
list-style:none;
}

ul.Niveau1 li
{
position:relative;
float:left;
}

ul.Niveau1 li span
{
margin:0px;
padding:0px 5px 0px 5px;
font:normal small-caps normal 12px/25px Arial;
color:#000000;
cursor:default;
}

ul.Niveau2
{
position:absolute;
width:120px;
left:0px;
top:25px;
display:none;
border:solid 1px #7b7a7c;
background:#FFFFFF url(SMenuFond.gif) repeat-y left top;
}

ul.Niveau2 li
{
width:100%;
}

ul.Niveau2 li a
{
display:block;
padding-left:27px;
width:93px;
margin:0px;
line-height:25px;
font-size:12px;
color:#000000;
text-decoration:none;
border-width:0px;
}

/* -------- GESTION DES HOVERS VIA JAVASCRIPT ---------------- */
.LIOVER
{
background:url(MenuFondOver.gif) repeat-x left top;
color:#FFFFFF;
}

.LISOVER	
{
background:url(SMenuFondOver.gif) repeat-x left top;
}
ul.Niveau1 li.LIOVER span	{color:#FFFFFF;}
ul.Niveau1 li.LIOVER ul	{display:block;}

Remarque:
Il ne s'agit bien sûr que d'une alternative à csshover.htc ou aux commentaires conditionnels.
je n'ai pas utilisé la technique des portes coulissantes dans cet exemple et le css est pas génial (c'est peu de chose de le dire), mais ce qui pour moi est intéressant dans cet exemple, c'est le fait de jouer en javascript avec les classes et de laisser le css prendre le relais pour les effets de styles...

merci d'avoir pris le temps de me lire et un petit commentaire (pas trop méchant si cela vous semble tout benêt) serait super sympa...
Modifié par JPOUILLE (05 Mar 2007 - 17:58)

Pour alléger ton code, tu devrais affecter les onmouseover et onmouseout dans une fonction de chargement du menu.

Avant tout, merci pour ta réponse,

En faite, cet exemple est généré à partir d'un fichier .sitemap en utilisant un <asp:BulletedList> (un <ul>) auquel j'ajoute dynamiquement des <asp:ListItem> (des <li>) en fonction des noeuds qui ont été trouvé.