我是一个javascript noob,并尝试使用4级深度进行以下菜单。有3级,它有效地工作,但有4级,当我把mous放在“Dupa tara”时,它显示了国家和“Cramele Recas”。有人可以帮助我使其成功运作吗? 这是代码: HTML
<div id="nav" class="group elegant" style="width:720px;">
<ul id="menu-principal" class="level-1"><li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-8 current_page_item menu-item-114"><a href="http://selectedwine.ro/">Home</a></li>
<li id="menu-item-116" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-116"><a href="http://selectedwine.ro/despre-vin/">Despre noi</a></li>
<li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://selectedwine.ro/vinul/">Vinul</a>
<ul class="sub-menu">
<li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"><a href="http://selectedwine.ro/arhiva/">Arhiva</a></li>
</ul>
</li>
<li id="menu-item-115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115"><a href="http://selectedwine.ro/products-page/">Enoteca</a>
<ul class="sub-menu">
<li id="menu-item-141" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-141"><a href="http://selectedwine.ro/products-page/product-category/dupa-tara/">Dupa tara</a>
<ul class="sub-menu">
<li id="menu-item-142" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-142"><a href="http://selectedwine.ro/products-page/product-category/franta/">Franta</a></li>
<li id="menu-item-143" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-143"><a href="http://selectedwine.ro/products-page/product-category/argentina/">Argentina</a></li>
<li id="menu-item-144" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-144"><a href="http://selectedwine.ro/products-page/product-category/italia/">Italia</a></li>
<li id="menu-item-203" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-203"><a href="http://selectedwine.ro/products-page/product-category/romania/">Romania</a>
<ul class="sub-menu">
<li id="menu-item-215" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-215"><a href="http://selectedwine.ro/products-page/product-category/cramele-recas/">Cramele Recas</a></li>
</ul>
</li>
</ul>
</li>
</ul>
和JS
$('#nav li, ul.sub-menu, ul.children').each(function(){
n = $('ul.sub-menu:not(ul.sub-menu li > ul.sub-menu), ul.children:not(ul.children li > ul.children)', this).length;
if(n) $(this).addClass('parent');
});
$('#nav ul > li').hover(
function()
{
$('ul.sub-menu:not(ul.sub-menu li > ul.sub-menu), ul.children:not(ul.children li > ul.children)', this).stop(true, true).fadeIn(300);
},
function()
{
$('ul.sub-menu:not(ul.sub-menu li > ul.sub-menu), ul.children:not(ul.children li > ul.children)', this).fadeOut(300);
}
);
$('#nav ul > li').each(function(){
if( $('ul', this).length > 0 )
$(this).children('a').append('<span class="sf-sub-indicator"> »</span>')
});
$('#nav li:not(.megamenu) ul.sub-menu li, #nav li:not(.megamenu) ul.children li').hover(
function()
{
var options;
winWidth = $(document).width();
subMenuWidth = $(this).parent().outerWidth();
space = $(this).offset().left + subMenuWidth * 2;
if(space < winWidth) options = {left:subMenuWidth-20};
else options = {left:subMenuWidth*-1};
$('ul.sub-menu, ul.children', this).hide().css(options).stop(true, true).fadeIn(300);
},
function()
{
$('ul.sub-menu, ul.children', this).fadeOut(300);
}
);