我正在尝试创建一个 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();
})
谢谢，安德鲁