jquery菜单结合stumbleupon工具栏的子菜单定位出错

positioning of sub menus in jquery menu combined with stumbleupon toolbar goes wrong

本文关键字：菜单 定位 出错 工具栏 结合 stumbleupon jquery      更新时间：2023-09-26

脚本标题:dropline menu

脚本URL: http://www.dynamicdrive.com/style/cs...rop_line_menu/

我让菜单工作得很好，但是，我发现当我有偶然发现工具栏时，子菜单突然被放置在比它应该的低22px左右。有时会增加到数倍。您可以在Chrome浏览器中亲自测试此行为，启用stumbleupon工具栏并将鼠标悬停在其中一个有子菜单的菜单项上:http://kwestievan.nl/unityexpress/

我该如何解决这个问题?我检查了body.offset()。顶部是问题所在，但实际上它比差值高:32px，而菜单的差值只有22px。

子菜单较低的原因是元素

<ul class="sub-menu"</ul>

的样式为

position: absolute;
left: 233px;
top: 224px;

这样做的目的是将子菜单"相对"放置在浏览器窗口的左侧223px，从"浏览器窗口"的顶部224px。当没有"stumbleupon"工具栏时，这可以正常工作。但是，当您添加stumbleupon工具栏时，它会以iframe元素的形式添加工具栏。iframe元素的高度会导致子菜单被下推，因为浏览器窗口的尺寸已经改变了。

你可以通过找出"stumbleupon"工具栏的高度，然后将该高度与子菜单在显示器/屏幕分辨率上向下推的距离进行比较来快速测试。它们是一样的

解决方法是给元素

<li id="menu-item-1738"</li>

a style of

position: relative;

，然后样式子菜单，使其"绝对"定位于包含li元素的"相对"。例如

position: absolute;
top: 20px;
left: 15px;

当然，所有这些都是由脚本完成的。我不知道你为什么要使用javascript。这可以简单地通过CSS实现。

相关文章：