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是最有用的插件之一 - 相信我！

该演示也类似于您想要实现的效果（没有缓动）

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

css菜单显示悬停链接下面隐藏的div

1 个答案: