jquery - css 菜单在悬停链接下方显示隐藏的 div

Question

我正在尝试创建一个 CSS/Jquery 水平菜单。所有列表项都包含一个链接，其中一个将包含一个隐藏的 div，当将鼠标悬停在相应的链接上时应该显示该 div。

我遇到的问题是，当链接悬停在隐藏的 div 上时，它位于菜单的容器 div 中，这意味着现在显示的 div 的背景与菜单和其他样式相同。

我想要的是要显示的 div，不是与菜单相同的 div 的一部分，而是出现在相应链接的下方。

我找到的一个例子是 http://www.inprocorp.com/default.aspx如果您将鼠标悬停在任何标题链接上。

隐藏的div中的内容可以包含图片、HTML列表、段落...

我尝试使用 jsfiddler，但它目前已关闭。

代码:

HTML

<div id="centeredmenu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">services</a></li>
<li class="subMenu"><a href="#" id="prod">products</a>
<div class="hiddencontent">hidden content</li>
<li><a href="#">contact</a></li> 
<li><a href="#">about</a></li>
</ul>
</div>

JS

$('li.subMenu a').hover(function(evt)
{       
var link = $(this);
var dialog = link.next('div');
dialog.css("top", link.position().top);
dialog.css("left", link.position().left);
dialog.css("position", "relative"); 
dialog.show();
},

function() { 
$(this).next('div').hide();
})

谢谢， 安德鲁

Answer 1

这应该能帮到你:

http://www.brandammo.co.uk/blog/2011/02/simple-jquery-dropdown-menu-with-easing-and-hoverintent-navidropdown-1-0/

要创建下拉菜单，hoverintent 是最有用的插件之一 - 相信我!

demo也和你想达到的效果差不多(没有缓动)

http://www.brandammo.co.uk/blog/wp-content/uploads/2011/02/jquery.naviDropDown.v1.0.DEMO/