세로 드롭 다운 메뉴를 수행하는 방법은 무엇입니까?

Question

는이 사이트에 같은 수직 드롭 다운 메뉴를 어떻게 실현하려고 : http://haririsportsandmedicals.de/

그것은 "드롭 다운"을해야 onClick 이벤트가 mousover에서 발생하고하지 않을 때.

누군가 이와 같은 작업을 수행하는 코드 샘플이 있습니까?

감사합니다.

Answer 1

이보십시오.

HTML

<div> 
    <ul> 
     <li><a href="#">Menu 1</a></li> 
     <li><a href="#">Menu 2</a> 
      <ul> 
       <li><a href="#">Sub menu 1</a></li> 
       <li><a href="#">Sub menu 2</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Menu 3</a></li> 
     <li><a href="#">Menu 4</a></li> 
    </ul> 
<div> 

CSS

*{ 
    padding: 0px; 
    margin: 0px; 
} 

li{ 
    list-style: none; 
} 

li a{ 
    text-decoration: none; 
    height: 26px; 
    display: inline-block; 
} 

li ul{ 
    display: none; 
} 

li li a{ 
    margin-left: 10px;  
} 

jQuery를

$(document).ready(function(){ 
    $('li').click(function(){ 
     $(this).children('ul').toggle(); 
    }); 
}); 

Demo

Answer 2

이것 좀보세요. 나는 당신이 찾고있는 것에 아주 가깝다고 생각합니다.

데모 : http://designshack.net/tutorialexamples/verticalnav/index.html

튜토리얼/가이드 : http://designshack.net/articles/css/verticalaccordionav/