Menu CSS disparaître

Question

J'ai créé un menu en html/css mais où je voulais que les sous-éléments soient affichés sur le pointeur de l'élément parent. Le problème est lorsque je le survole dans IE, il montre seulement ses sous-éléments lorsque je passe la souris sur le texte dans l'élément de menu, Si je survole l'élément et non le texte, les sous-éléments disparaissent à nouveau. Donc, si je plane et que je veux déplacer ma souris dans mon sous-menu, le sous-menu disparaît à moins que je ne sois assez rapide. C'est très agaçant, est-ce que quelqu'un sait comment je peux résoudre ça?

mon code de menu est comme ceci:

<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 côté gauche qui montre qu'il est sous-éléments que le vol stationnaire, donc je 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; 
} 

Depuis cela ne fonctionne qu'avec Firefox Je devais aussi insérer un javascript pour obtenir 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> 

Beaucoup merci beaucoup pour les réponses

Answer 1

Dans votre CSS vous avez:

#leftnav li:hover ul 

Ce qui signifierait la règle est appliquée à ul éléments qui sont des enfants d'éléments li lorsque que li mère est plané.

Mais dans votre code HTML, vous avez:

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

Ainsi, le sous article ul n'est pas un enfant de l'élément ul, de sorte que cette règle ne vient jamais vrai. 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> 

Notez que je ne ferme pas l'élément de liste avant la fin de la sous-liste.

Answer 2

Reinventing the wheel: http://www.htmldog.com/articles/suckerfish/ vous en apprend à ce sujet. Ils ont même un great example.