Le menu CSS disparaît

Question

J'ai créé un menu en html/css mais je voulais que les sous-éléments soient affichés au survol de l'élément parent. Le problème est que lorsque je survole l'élément dans IE, il n'affiche ses sous-éléments que lorsque je survole le texte de l'élément de menu. Si je survole l'élément et non le texte, les sous-éléments disparaissent à nouveau. Donc, si je survole l'élément et que je veux déplacer ma souris vers mon sous-menu, le sous-menu disparaît à moins que je ne sois assez rapide. C'est très ennuyeux, est-ce que quelqu'un sait comment je peux résoudre ce problème ?

Mon code de menu est le suivant :

<ul id="leftnav">
 <li><a>Item1</a></li>
     <ul>
         <li><a href='#'>SubItem1</a></li>
         <li><a href='#'>SubItem2</a></li>
         <li><a href='#'>SubItem3</a></li>
    </ul>
 <li><a>Item2</a></li>
     <ul>
         <li><a href='#'>SubItem1</a></li>
         <li><a href='#'>SubItem2</a></li>
         <li><a href='#'>SubItem3</a></li>
     </ul>
</ul>

Le menu doit être un menu de gauche qui n'affiche ses sous-éléments qu'au survol, j'ai donc utilisé les css pour y parvenir avec le code suivant :

#leftnav, #leftnav ul
{
 padding: 0;
 margin: 0;
}

#leftnav ul li
{
 margin-left: 102px;
 position: relative;
 top: -19px; /*sets the childitems on the same height as the parent item*/
}

#leftnav li
{
 float: left;
 width: 100px;
}

#leftnav ul
{
 position: absolute;
 width: 100px;
 left: -1000px; /*makes it disappear*/
}

#leftnav li:hover ul, #leftnav li.ie_does_hover ul
{
 left: auto;
}

#leftnav a
{
 display: block;
 height: 15px;
 margin-top: 2px;
 margin-bottom: 2px;
}

Comme cela ne fonctionne qu'avec firefox, j'ai également dû insérer un javascript pour que cela fonctionne dans IE en utilisant le code :

<script language="JavaScript">
 sfHover = function()
 { 
  var sfElsE = document.getElementById("leftnav").getElementsByTagName("LI");
  for (var i=0; i<sfElsE.length; i++)
  {
   sfElsE[i].onmouseover=function()
   {
    this.className+=" ie_does_hover";
   }
   sfElsE[i].onmouseout=function()
   {
    this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
   }
  }
 }
 if (window.attachEvent) window.attachEvent("onload", sfHover);
</script> 

Merci beaucoup pour les réponses

Answer 1

Dans votre CSS, vous avez :

#leftnav li:hover ul

Cela signifie que la règle est appliquée aux éléments ul qui sont des enfants d'éléments li lorsque le parent li est survolé.

Mais dans votre HTML, c'est le cas :

<li><a>Item2</a></li>
    <ul>
        <li><a href='#'>SubItem1</a></li>
   </ul>

Ainsi, le sous-poste ul n'est pas un enfant de l'élément ul Cette règle ne se vérifie donc jamais. Vous devez faire en sorte que les sous-éléments soient imbriqués dans les éléments. Comme ceci :

<ul id="leftnav">
   <li><a>Item1</a>
       <ul>
           <li><a href='#'>SubItem1</a></li>
           <li><a href='#'>SubItem2</a></li>
           <li><a href='#'>SubItem3</a></li>
      </ul>
   </li>
   <li><a>Item2</a>
       <ul>
            <li><a href='#'>SubItem1</a></li>
            <li><a href='#'>SubItem2</a></li>
            <li><a href='#'>SubItem3</a></li>
      </ul>
   </li>
</ul>

Remarquez que je ne ferme l'élément de la liste qu'après la sous-liste.

Answer 2

Reinventing the wheel : http://www.htmldog.com/articles/suckerfish/ vous l'apprend. Ils ont même un excellent exemple .