CSS меню исчезают

Question

Я создал меню в html / css, но там, где я хотел, чтобы подэлементы отображались при наведении на родительский элемент. Проблема в том, что когда я нахожу на нем курсор в IE, он отображает его подпункты только при наведении курсора на текст в пункте меню. Если при наведении курсора на элемент, а не на текст, подпункты снова исчезают. Поэтому, если я наведусь и захочу переместить мою мышь в мое подменю, подменю исчезнет, ​​если я не буду достаточно быстр. Это очень раздражает, кто-нибудь знает, как я могу решить это?

МОЙ код меню выглядит так:

<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>

Меню должно быть левосторонним, которое показывает его подпункты только при наведении, поэтому я использовал css для достижения этого с помощью следующего кода:

#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;
}

Так как это работает только с Firefox, мне также пришлось вставить JavaScript, чтобы заставить его работать в IE, используя код:

<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> 

Большое, большое, большое спасибо за ответы

Answer 1

В вашем CSS у вас есть:

#leftnav li:hover ul

Что означало бы, что правило применяется к элементам ul, которые являются потомками элементов li, когда указывается этот родительский элемент li.

Но в вашем HTML у вас есть:

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

Таким образом, подпункт ul не является дочерним по отношению к элементу ul, так что правило никогда не сбывается. Вы должны сделать вложенные элементы вложенными в элементы. Как это:

<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>

Обратите внимание, как я не закрываю элемент списка до тех пор, пока не завершится подсписок.

Answer 2

Reinventing the wheel: http://www.htmldog.com/articles/suckerfish/ учит вас этому. У них даже есть отличный пример .