UL菜单显示在jQuery用户界面选项卡和图像后面。
我已经创建了一个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指数似乎是罪魁祸首。但是，有人能提供一些关于如何实际解决这个问题的更多细节吗？(我实际上是一个C++开发人员，所以这是我不熟悉的领域)。
- 是将z-index属性添加到涉及navigation2的每条规则中，还是只添加一条?如果只需要在CSS文件中添加哪一条规则条目，我是否应该将z-索引添加到？
- 如何使用(最好是) FF Firebug或Chrome开发工具来检查jQuery选项卡z-index？
回答 4
Stack Overflow用户
发布于 2011-11-15 03:40:58
杰克说得对。在Z-指数上。您可以在Chrome工具中检查jquery的Z-索引，以确保您选择了更高的Z-索引。我说检查(或Firebug)的唯一原因是，上次我检查的jQuery UI对话框有一个Z-索引为1000。只要用一个大得可笑的#
Stack Overflow用户
发布于 2011-11-15 01:53:34
我会尝试将您的navigation2元素上的z-index属性弹出大的作为test - try 1000。
Stack Overflow用户
发布于 2013-04-18 20:19:16
如果您对issues没有任何问题，那么只需删除jquery.ui.tabs.css或jquery*..css中的“位置:相对”。
.ui-tabs { /*position: relative;*/ padding: .2em; zoom: 1; }没有必要设置z-索引。
https://stackoverflow.com/questions/8130557
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号