сохранение навигации второго уровня на первом уровне li: зависание видимо

Question

У нас есть горизонтальные навигационные системы 1-го и 2-го уровней. Когда 1-й уровень li зависает, второй уровень ul отображается горизонтально над первым уровнем ul.

Как сделать второй уровень ul остающимся видимым, когда мышь покидает первый уровень li? Это возможно только с CSS .. ??

Вот CSS:

ul.ebene1{display:inline;} 
ul.ebene1 li{display:inline; list-style-type:none; margin-right:2%;} 

ul.ebene2{display:none;} 
ul.ebene1 li:hover ul.ebene2{display:block; position:fixed; bottom:6%; width:80%; font-size:0.9em;} 

И HTML:

<ul class="ebene1"> 
    <li><a href="">NAV1</a> 
     <ul class="ebene2"> 
      <li><a href="">Nav2</a></li> 
      <li><a href="">Nav2</a></li> 
     </ul> 
    </li> 
    <li><a href="">NAV1</a></li> 
    <li><a href="">NAV1</a> 
     <ul class="ebene2"> 
      <li><a href="">Nav2</a></li> 
      <li><a href="">Nav2</a></li> 
     </ul> 
    </li> 
    <li><a href="">NAV1</a></li> 
</ul> 

Answer 1

Вы не можете сделать это только с помощью CSS. Подклассы :hover запускаются, когда вы hover элемент. Поэтому при выходе из элемента останавливается эффект зависания.

Вы можете использовать JQuery для отображения подменю.

[EDIT] Jquery решение будет таким:

HTML

<ul class="ebene1"> 
    <li><a href="">NAV1</a> 
     <ul class="ebene2"> 
      <li><a href="">Nav1.1</a></li> 
      <li><a href="">Nav1.2</a></li> 
     </ul> 
    </li> 
    <li><a href="">NAV2</a></li> 
    <li><a href="">NAV3</a> 
     <ul class="ebene2"> 
      <li><a href="">Nav3.1</a></li> 
      <li><a href="">Nav3.2</a></li> 
     </ul> 
    </li> 
    <li><a href="">NAV4</a></li> 
</ul> 

CSS

ul.ebene1 { 
    display:inline; 
} 
ul.ebene1 li { 
    display:inline; 
    list-style-type:none; 
    margin-right:2%; 
} 
.ebene2 { 
    display:none; 
    position:fixed; 
    bottom:6%; 
    width:80%; 
    font-size:0.9em; 
} 

JQuery

(".ebene1 li").mouseover(function() { 
    if($(this).children('ul').length > 0) // check if a ul exists in the li 
    { 
     $('.ebene2').hide(); // hide all submenus 
     $(this).find('ul').show(); // show this submenu 
    } 
}); 

И a DEMO.