我无法让子菜单的其余部分正常显示

Question

我有一个带ul子菜单的菜单，我写的脚本只能显示第一个子菜单，而另一个不显示。

这是jQuery脚本我使用

$(document).ready(function(){ 
    $('#top_menu_blockx').hover(
     function(){ 
      $('#top_menu_blockx').children('ul').stop().fadeIn('slow'); 
     }, 
     function(){ 
      $('#top_menu_blockx').children('ul').stop().fadeOut('slow'); 
     } 
    ); 
}); 

我已经包含了链接托特他的jsfiddle。 http://jsfiddle.net/kakashi807/RrYs4/2/

btw，为什么当鼠标悬停时子菜单的字体颜色不会变成白色？

谢谢

Answer 1

试试这个 - DEMO

$(document).ready(function(){ 
    $('.top_menu_btnx').hover(
     function(){ 
      $(this).children('ul').stop().fadeIn('slow'); 
     }, 
     function(){ 
      $(this).children('ul').stop().fadeOut('slow'); 
     } 
    ); 
}); 

而关于你的HTML - ID-S应该是唯一的！

Answer 2

试一试ClassName。然后它会工作。

小提琴例：http://jsfiddle.net/RrYs4/6/

JQuery的：

$(document).ready(function(){ 
    $('.top_menu_btnx').hover(
     function(){ 
      $(this).children('ul').stop().fadeIn('slow'); 
     }, 
     function(){ 
      $(this).children('ul').stop().fadeOut('slow'); 
     } 
    ); 
});