经过大量的工作和大量的搜索和组合代码，我终于可以使用熔岩灯下拉菜单导航了(看这里：http://lookseewatch.com/overflowexample/menu.html)。太棒了
问题是：我一辈子都无法使用Wordpress菜单(wp_nav_menu)。我一直无法让wp_nav_menu生成与我当前硬代码相同的标记。我还需要在"<ul class="nav">."wp_nav_menu的内部有这个<div id="box"><div class="head"></div></div>。它不允许我这样做，因为它生成了包含ul的类等等。
所以，在尝试了几个小时的不同东西之后，我就是不明白。如果你去这里http://lookseewatch.com/independentinsurance/您将看到两个导航间隔大约300像素。第一个是硬编码版本，第二个是由wp_nav_menu生成的。我已经更改了css以使用第二个导航，所以顶部有点有趣，但你会注意到"魔线"遵循了两个版本的导航，我认为这很有趣。我只是不知道如何把它降到动态版本以下。第二个问题是，当你在第二个导航上悬停在"保险服务"上时，一切都很好，然后你悬停在"商业保险"上，出现3个新的下拉菜单，当你悬停或单击其中一个选项时，它们很快就会消失。我不知道为什么。
这是我的导航.js 的代码
var speed = 400;//speed of lava lamp
var menuFadeIn = 0;//speed of menu fade in transition
var menuFadeOut = 0;//speed of menu fade in transition
var style = 'easeOutQuart';//style of lava lamp
var totalWidth = 0;//variable for calculating total width of menu according to how many li's there are
var reducedWidth = 4;
(function($) {
$(document).ready(function(){
if($.browser.opera){
$(".nav ul").css("margin-top", "32px");//opera fix for margin top
$(".nav ul ul").css("margin-top", "-20px");
}
if(!$.browser.msie){// ie fix
$("ul.nav span").css("opacity", "0");
$(".nav ul ul ul").css("margin-top", "-20px");
}
if($.browser.msie){
$("ul.nav span").css({visibility:"hidden"});
}
//totalWidth = $(".nav li:last").offset().left - $(".nav li:first").offset().left + $(".nav li:last").width();//width of menu
//$(".nav").css({width:totalWidth});//setting total width of menu
var dLeft = $('.current-menu-item a').offset().left+15;//setting default position of menu
var dWidth = $('.current-menu-item a').width();
var dTop = $('.current-menu-item a').offset().top;
//var origLeft = .data($dLeft.offset().left+14);
//var origWidth = .data($dWidth.width());
//var origTop = .data($dTop.offset().top);
//Set the initial lava lamp position and width
$('#box').css({left:dLeft});
$('#box').css({top: dTop});
$('#box').css({width: dWidth});
$(".nav > li").hover(function(){
var position = $(this).offset().left+15;//set width and position of lava lamp
var width = $(this).width()-29;
if(!$.browser.msie){//hover effect of triangle (glow)
$(this).find('span:first').stop().animate({opacity: 1}, 'slow');
}
else{
$(this).find('span:first').css({visibility:"visible"});
}
$('#box').stop().animate({left:position, width:width},{duration:speed, easing: style});
}, function() {
$('#box').stop().animate({left:dLeft, width:dWidth},{duration:speed, easing: style});
},
function(){
if(!$.browser.msie){
$(this).find('span:first').stop().animate({opacity: 0}, 'slow');//hiding the glow on mouseout
}
if($.browser.msie){
$(this).find('span:first').css({visibility:"hidden"});
}
});
$(".nav li").hover(function(){//animating the fade in and fade out of submenus level 1
$(this).find('li').fadeIn(menuFadeIn);
$('li li li').css({display:"none"});
},
function(){
$(this).find('li').fadeOut(menuFadeIn);
});
$(".submenu0 li").hover(function(){//animating the fade in and fade out of submenus level 2
$(this).find('li').fadeIn(menuFadeIn);
$('li li li li').css({display:"none"});
},
function(){
$(this).find('li').fadeOut(menuFadeOut);
});
$(".submenu1 li").hover(function(){//animating the fade in and fade out of submenus level 3
$(this).find('li').fadeIn(menuFadeIn);
},
function(){
$(this).find('li').fadeOut(menuFadeOut);
});
});
})($);
我认为问题在于我如何瞄准第二或第三层次。
$(".submenu0 li").hover(function(){//animating the fade in and fade out of submenus level 2
$(this).find('li').fadeIn(menuFadeIn);
$('li li li li').css({display:"none"});
},
function(){
$(this).find('li').fadeOut(menuFadeOut);
});
$(".submenu1 li").hover(function(){//animating the fade in and fade out of submenus level 3
$(this).find('li').fadeIn(menuFadeIn);
},
function(){
$(this).find('li').fadeOut(menuFadeOut);
});
不管怎样，我很感激你的帮助。我需要想办法解决这个问题，所以如果你有任何建议，请随时提出。此外，如果我需要提供任何代码片段，我很乐意。任何解决导航问题的方法。
好的，您需要的东西可以在Wordpress Codex中找到。在wp_nav_menu()函数的默认值数组中(可在此处找到)，您可以看到一个名为items_wrap的选项。使用它，我们可以将您的div添加到菜单的末尾：
<?php wp_nav_menu( array('items_wrap' => '<ul class="%2$s">%3$s<div id="box"><div class="head"></div></div></ul>' ) ); ?>
---编辑---
好的，你的子菜单悬停的问题似乎是这一行：
$('li li li').css({display:"none"});
我在这里自由地创建了一个关于你的问题的jsFiddle：http://jsfiddle.net/zAqct/正如你所看到的，有问题的行被注释掉了，悬停似乎又开始工作了。显然，这不是100%，所以我制作了一个更简单的测试用例。
---第二版---
好的，所以进一步来看，我认为主要问题是你的CSS和JS被证明有点过于复杂。为了说明一个更简单的方法，我在这里更新了jsFiddle：http://jsfiddle.net/zAqct/2/
你应该发现这个版本更符合你的需要。