третьего уровня выпадающим меню Исчезает на MouseOver

Question

Это сайт я работаю над: http://argumentinamerica.com Вот filddle для меню я работаю: http://jsfiddle.net/Qtfrq/

HTML:

<div id="menu"> 
<ul id="menu"> 
<li><a href="#"><span></span>Home</a></li> 
<li class='has-sub'><a href="#"><span></span>Units</a> 
    <ul> 
     <li class='has-sub'><a href="#">Unit 1</a></li> 
      <ul class="thirdtier"> 
       <li><a href="#">Read About It</a></li> 
       <li><a href="#">Write About It</a></li> 
       <li><a href="#">Hear About It</a></li> 
       <li><a href="#">Speak About It</a></li> 
       <li><a href="#">Read About It</a></li> 
       <li><a href="#">Write About It</a></li> 
      </ul> 
     <li class='has-sub'><a href="#">Unit 2</a></li> 
     <li class='has-sub'><a href="#">Unit 3</a></li> 
     <li class='has-sub'><a href="#">Unit 4</a></li> 
     <li class='has-sub'><a href="#">Unit 5</a></li> 
    </ul> 
<li><a href="#"><span></span>Teacher Center</a></li> 
<li><a href="#"><span></span>About</a></li> 
<li><a href="#"><span></span>Give 1</a></li> 
</ul> 
</div> 

CSS:

#menu { 
    margin: 0; padding: 2px 0px 2px 0px; 
    list-style-type: none; 
    height: 2.4em; 
} 
#menu ul, #menu li, #menu span, #menu a { 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 
#menu li { 
    float: left; 
    width: 20%; 
} 
#menu a { 
    display: block; 
    margin: 1px; 
    height: 2.4em; 
    font-size: 10px; 
    line-height: 2.4em; 
    text-decoration: none; 
    text-transform: uppercase; 
    text-align: center; 
    background: #ffcc66; 
    color: #996600; 
} 
#menu span { 
    position: absolute; top: 8px; left: 8px; 
    width: 8px; height: 8px; 
    background: #ff9933; 
} 
#menu a:hover { 
    background: #cc3300; 
    color: #ffcc66; 
} 
#menu ul{ 
    list-style-type: none; 
} 
#menu .has-sub { 
    z-index: 1; 
} 
#menu .has-sub:hover > ul { 
    display: list-item; 
} 
#menu .has-sub ul { 
    display: none; 
    position: absolute; 
    left:0; 
} 
#menu .has-sub ul li { 
    *margin-bottom: -1px; 
    position: relative; 
    width: 100%; 
    height: 2.6em; 
    line-height: 2.4em; 
} 
#menu .has-sub ul li a { 
    background: #ff9944; 
    font-size: .65em; 
    color: ffcc66; 
} 
#menu .has-sub ul li a:hover, 
#menu .has-sub ul li:hover > a { 
    background: #ff6633; 
    color: 993300; 
} 
#menu .has-sub { 
    z-index: 1; 
} 
#menu .has-sub:hover > ul { 
    display: list-item; 
} 
#menu .has-sub .has-sub:hover + ul { 
    display: list-item; 
} 
.thirdtier li { 
    left: 100%; 
} 

После долгих проб и ошибок, я понял, как получить третий уровень, чтобы показать, когда я наведите курсор мыши на втором ярусе, но когда я пытаюсь чтобы выбрать что-то в списке третьего уровня, он исчезает. Я знаю, что я должен применять стиль зависания к элементу, чтобы он оставался «зависающим», когда вы наводили над своим дочерним элементом, и я думал, что сделал это, но он не работает. Мне бы очень понравилась эта проблема.

Answer 1

Попробуйте это: http://jsfiddle.net/Qtfrq/2/

В основном пара небольших изменений в вашем HTML & CSS.

<div id="menu"> 
<ul id="menu"> 
    <li><a href="#"><span></span>Home</a></li> 
    <li class='has-sub'><a href="#"><span></span>Units</a> 
     <ul> 
      <li class='has-sub'><a href="#">Unit 1</a> 
       <ul class="thirdtier"> 
        <li><a href="#">Read About It</a></li> 
        <li><a href="#">Write About It</a></li> 
        <li><a href="#">Hear About It</a></li> 
        <li><a href="#">Speak About It</a></li> 
        <li><a href="#">Read About It</a></li> 
        <li><a href="#">Write About It</a></li> 
       </ul> 
      </li> 
      <li class='has-sub'><a href="#">Unit 2</a></li> 
      <li class='has-sub'><a href="#">Unit 3</a></li> 
      <li class='has-sub'><a href="#">Unit 4</a></li> 
      <li class='has-sub'><a href="#">Unit 5</a></li> 
     </ul> 
    </li> 
    <li><a href="#"><span></span>Teacher Center</a></li> 
    <li><a href="#"><span></span>About</a></li> 
    <li><a href="#"><span></span>Give 1</a></li> 
</ul> 
</div> 


#menu { 
margin: 0; padding: 2px 0px 2px 0px; 
list-style-type: none; 
height: 2.4em; 
} 
#menu ul, #menu li, #menu span, #menu a { 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 
#menu li { 
float: left; 
width: 20%; 
} 
#menu a { 
display: block; 
margin: 1px; 
height: 2.4em; 
font-size: 10px; 
line-height: 2.4em; 
text-decoration: none; 
text-transform: uppercase; 
text-align: center; 
background: #ffcc66; 
color: #996600; 
} 
#menu span { 
position: absolute; top: 8px; left: 8px; 
width: 8px; height: 8px; 
background: #ff9933; 
} 
#menu a:hover { 
background: #cc3300; 
color: #ffcc66; 
} 

#menu ul{ 
list-style-type: none; 
} 
#menu .has-sub { 
    z-index: 1; 
} 
#menu .has-sub:hover > ul { 
    display: list-item; 
} 
#menu .has-sub ul { 
    display: none; 
    position: absolute; 
    left:0; 
} 
#menu .has-sub ul li { 
    *margin-bottom: -1px; 
    position: relative; 
    width: 100%; 
    height: 2.6em; 
    line-height: 2.4em; 
} 

#menu .has-sub ul li a { 
    background: #ff9944; 
    font-size: .65em; 
    color: ffcc66; 
} 

#menu .has-sub ul li a:hover, 
#menu .has-sub ul li:hover > a { 
    background: #ff6633; 
    color: 993300; 
} 
#menu .has-sub { 
    z-index: 1; 
} 
#menu .has-sub:hover > ul { 
    display: list-item; 
} 

#menu .has-sub > .has-sub:hover + ul { 
    display: list-item; 
} 

.thirdtier { 
    top: 0; 

} 

.thirdtier li { 
    left: 100%; 
} 

Answer 2

Общей ошибкой является не размещение вложенного UL внутри его родительского LI (что, кстати, приводит к недействительному HTML). Поскольку эти UL не являются частью LI с состоянием зависания, они не поддерживают видимость.

В этом случае ваш второй уровень работает, потому что вы вообще не закрываете теги LI. Поэтому браузер берет догадки о том, где он должен быть закрыт, глядя на следующий LIB.

Вы, вероятно, нужно переделать ваш CSS, но это, как это должно быть:

<ul id="menu"> 
    <li><a href="#"><span></span>Home</a></li> 
    <li class='has-sub'><a href="#"><span></span>Units</a> 
     <ul> 
      <li class='has-sub'><a href="#">Unit 1</a> 
       <ul class="thirdtier"> 
        <li><a href="#">Read About It</a></li> 
        <li><a href="#">Write About It</a></li> 
        <li><a href="#">Hear About It</a></li> 
        <li><a href="#">Speak About It</a></li> 
        <li><a href="#">Read About It</a></li> 
        <li><a href="#">Write About It</a></li> 
       </ul> 
      </li> 
      <li class='has-sub'><a href="#">Unit 2</a></li> 
      <li class='has-sub'><a href="#">Unit 3</a></li> 
      <li class='has-sub'><a href="#">Unit 4</a></li> 
      <li class='has-sub'><a href="#">Unit 5</a></li> 
     </ul> 
    </li> 
    <li><a href="#"><span></span>Teacher Center</a></li> 
    <li><a href="#"><span></span>About</a></li> 
    <li><a href="#"><span></span>Give 1</a></li> 
</ul>