Меню 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 

Что будет означать правило применяется к уль элементов, которые являются потомками элементов 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/ учит вас об этом. У них даже есть great example.