我创建了一个 HTML 页面，它使用简单的 CSS(无 javascript)进行菜单导航。然而，我使用 jQuery UI 选项卡在同一页面上显示选项卡式数据。
当菜单下拉时，它出现在 jQuery 选项卡的后面(实际上，菜单也出现在菜单落在其上的文本中的任何图像后面。
我的(准系统)HTML 看起来像这样:
<html>
<body>
<div>
<div id="navigation2">
<ul id="menu" style="margin-left:5px;">
<li class="navigable">
<a class="menuitem" href="#">Foo</a>
<ul class="submenu">
<li><a href="">Foo Bar 1</a></li>
<li><a href="">Foo Bar 2</a></li>
<li><a href="">Foo Bar 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id ="tdisp">
<!-- jQuery tab display here ... -->
</div>
</body>
</html>
CSS 文件看起来像这样:
#navigation2{
background-color: #2d2d2d;
color: #FFFFFF;
height: 35px;
list-style-type: none;
font-size: 15px;
}
#navigation2 ul li {
list-style-type: none;
padding: 7px 20px 7px 5px;
float: left;
}
#navigation2 a.menuitem, #navigation2 a.undecorated {
color: #CCCCCC;
text-decoration: none;
}
#navigation2 a.current{
color:#FF0000;
}
#navigation2 ul li.navigable:hover {
cursor: pointer;
color: #FFFFFF;
background-color: #535354;
border-bottom-color: #c00000;
border-bottom-width: 2px;
border-bottom-style: solid;
}
我怀疑它与 z 顺序有关，但我不确定并且想听听这里的专家如何解决这个问题。
[[编辑]]
从我目前收到的答复来看，z-index 似乎是罪魁祸首。但是，有人可以提供更多有关如何实际解决此问题的详细信息吗？ (我实际上是一名 C++ 开发人员，所以这对我来说是陌生的领域)。
我是将 z-index 属性添加到每条涉及 navigation2 的规则，还是只添加到一个？ - 如果只需要一个，我应该将 z-index 添加到 CSS 文件中的哪个规则条目？
如何使用(最好)FF Firebug 或 Chrome 开发者工具检查 jQuery 选项卡的 z-index？
最佳答案
jack 说得对。提高 Z 指数。您可以在 Chrome 开发工具中检查 jquery 选项卡的 Z-Index，以确保您选择了更高的 Z-Index。我说检查 Chrome 开发工具(或 Firebug)的唯一原因是我上次检查时 jQuery UI 对话框的 Z-Index 为 1000。只需使用大得离谱的#
关于jquery - UL 菜单显示在 jQuery UI 选项卡和图像后面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8130557/