帶有懸停的DropDown多級菜單

Question

以下是基本工作的DropDown菜單，子菜單在懸停父文本時出現。

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#nav ul').hide(); 

    $('#nav li > a').hover(
     function() {$('ul', this.parentNode).stop().slideDown(100);} 
    ); 

    $('#nav li').hover(null, 
     function (e) {$('ul', this.parentNode).stop().slideUp(100);} 
    ); 

    } 
); 
</script> 

<ul id="nav"> 
    <li><a href="#">Parent A</a> 
    <ul> 
     <li><a href="#">Sub a1</a> 
      <ul> 
      <li><a href="#">Item a1.1</a></li> 
      <li><a href="#">Item a1.2</a></li> 
      <li><a href="#">Item a1.3</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Sub a2</a></li> 
     <li><a href="#">Sub a3</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Parent B</a> 
    <ul> 
     <li><a href="#">Sub b1</a></li> 
     <li><a href="#">Sub b2</a></li> 
     <li><a href="#">Sub b3</a></li> 
    </ul> 
    </li> 
</ul> 

我已經在子菜單下面添加了第三級以上，但沒有打開和關閉最後一級。

在這種情況下，我不確定是否需要更改html代碼，或者是否只需要更改JavaScript以便腳本可以正常工作。

Answer 1

如下你可以這樣做：

$('#nav ul').hide(); 

    $('#nav li > a').hover(
     function() { 
     //show its submenu 
     $(this).parent().children('ul').stop().slideDown(100); 
     } 
    ); 
    $('#nav li').hover(null, 
     function (e) { 
     //hide its submenu 
     $(this).children('ul').stop().slideUp(100); 
     } 
    ); 

見工作demo