脚本标题: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实现。