아코디언 스타일 메뉴에 두 번째 하위 탐색 추가

Question

이 아코디언 메뉴에 추가 subnav가 있습니다. nav ul li에 하위 요소를 추가하려고 시도했지만 작동하지 않는 것 같습니다. 이상적으로는 "웹"아래의 웹 프로젝트를 나열하고 "인쇄"아래에 인쇄 할 수 있기를 원합니다.

뿐인 : 자식 요소를 추가 http://jsfiddle.net/schermerb/rGMAu/1/

.header button { 
    cursor:pointer; 
    float:right; 
    padding:5px; 
    margin:10px 10px; 
    border:none; 
    border:1px solid #ececec; 
    background:#444; 
    color:#ececec; 
} 
.nav { 
    text-align:center; 
    background:#444; 
} 
.nav ul li { 
    text-transform:capitalize; 
    display:block; 
    border-bottom:1px solid #ececec; 
} 
.nav a { 
    display:block; 
    padding:10px; 
    color:#ececec; 
} 
.nav a:hover { 
    background:#029b9d; 
    color:#ececec; 
} 

<button id="show">Menu <span>+</span> <span style="display:none;">-</span> 
</button> 
<div class="clear"></div> 
</div> 
<div class="nav"> 
    <ul> 
     <li><a href="#">Home</a> 

     </li> 
     <li><a href="#">About</a> 

     </li> 
     <li><a href="#">Web</a> 

     </li> 
     <li><a href="#">Print</a> 

     </li> 
    </ul> 
</div> 

Answer 1

js를 업데이트했습니다.

$('.nav, .nav li ul').hide(); 
$('#show').click(function() { 
    $(".nav").toggle(); 
    $("span").toggle(); 
}); 
$('.nav li').click(function(){ 
    $(this).children('ul').toggle(); 
}); 

Updated jsFiddle File

Answer 2

은 옳은 길이었다.

<li><a href="#">Web</a> 
    <ul class="sub"> 
     <li class="item">item1</li> 
     <li class="item">item2</li> 
    </ul> 
</li> 

http://jsfiddle.net/jonigiuro/rGMAu/2/

당신은 기본적으로 자식 요소를 숨기고, 상위에 마우스를 가져 가면, 당신은 그것을 보여

이

ul li:hover ul 

여기에 귀하의 경우에 대한 revelant CSS의를 :

.nav ul li ul { 
    color: red; 
    margin: 0; 
    padding: 0; 
    display: none; 
} 

.nav ul li:hover ul { 
    display: block; 
} 

.nav ul li ul li { 
    padding: 10px 0; 
}