Tworzenie prostego menu wielopoziomowego CSS

Question

Próbuję utworzyć stronę z funkcją nawigacji DOKŁADNIE taką jak ta: http://www.rex-ny.com/, gdzie klikasz element listy, a jego elementy potomne pojawiają się i pozostają.

Mogę to zrobić za pomocą hover, ale nie mogę dowiedzieć się, jak go zatrzymać, gdy się nie unosi.

Wygląda na to, że najłatwiej jest zrobić najprostszą rzecz.

<ul id="menu"> 
    <li><a href="#">Menu 1</a> 
      <ul> 
       <li><a href="#">Item A</a></li> 
       <li><a href="#">Item B</a></li> 
       <li><a href="#">Item C</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Menu 2</a> 
      <ul> 
       <li><a href="#">Item A</a></li> 
       <li><a href="#">Item B</a></li> 
       <li><a href="#">Item C</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Menu 3</a> 
      <ul> 
       <li><a href="#">Item A</a></li> 
       <li><a href="#">Item B</a></li> 
       <li><a href="#">Item C</a></li> 
      </ul> 
    </li> 
</ul> 

Dzięki

Oto jsfiddle http://jsfiddle.net/phzuC/

Answer 1

Oto CSS rozwiązanie tylko jako wnioskowanej OP, używając tabindex

DEMO http://jsfiddle.net/kevinPHPkevin/phzuC/2/

#menu li > ul { 
    display:none; 
} 

#menu li:focus > ul { 
    display:block; 
} 
li { 
    outline: 0; 
} 

EDITED

Oto rozwiązanie jQuery, jeśli kiedykolwiek będziesz tego potrzebować. Utrzymuje podmenu otwarte i jest łatwe do wdrożenia. 11 linii kodu.

DEMO http://jsfiddle.net/kevinPHPkevin/phzuC/5/

$(document).ready(function() { 
    $(".nav-top > li").click(function(e) { 
    if($(this).find('ul').hasClass('expanded')) { 
     $(this).find('ul').removeClass('expanded').hide(); 
    } else { 
    $(this).find('ul').addClass('expanded').show(); 
    } 
    }); 
    $('.nav-top a').click(function(e){ 
    e.preventDefault(); 
    }); 
}); 

Answer 2

Oto kolejny CSS rozwiązanie tylko że używa albo:

• wyboru, jeśli chcesz się po menu, aby przełączyć na kliknięcia
• przyciski opcji, jeśli chcesz menu, aby automatyczne zamykanie po wybraniu innego:

Numer referencyjny:

• CSSTricks: Stuff you can do with the “Checkbox Hack”
• The CSS Ninja: CSS Tree

Demo

Zachowanie podstawowe CSS (demo ma więcej stylizacji do usunięcia domyślnej listy wcięcia/kule)

.sideMenu input[type='radio'], 
.sideMenu input[type='checkbox'] { 
    display: none; 
} 
.sideMenu input[type='radio'] + ul, 
.sideMenu input[type='checkbox'] + ul { 
    position: relative; 
    display: none; 
} 
.sideMenu input[type='radio']:checked + ul, 
.sideMenu input[type='checkbox']:checked + ul { 
    display: block; 
} 

HTML (może być dowolnie głęboka):

<nav class="sideMenu"> 
    <ul> 
     <li> 
      <label for="menu1">Menu 1</label> 
      <input id="menu1" type="checkbox" name="menu1"> 
      <ul> 
       <li><a href="#">Item A</a></li> 
       <li><a href="#">Item B</a></li> 
       <li><a href="#">Item C</a></li> 
      </ul> 
     </li> 
     <!-- repeat --> 
    </ul> 
</nav>