【发布时间】：2011-12-28 06:59:05
【问题描述】：
我已经制作了一个工作正常的下拉菜单，但是当我打开一个 jquery 对话框窗口时，然后当我打开一个下拉菜单时，它的菜单一直隐藏在 jquery 对话框窗口后面，尽管我想要菜单开在前面。
这是 jquery 代码。 (document).ready(function() {
$('#nav li').hover(function() {
//show its submenu
$('ul', this).slideDown(200);
}, function() {
//hide its submenu
$('ul', this).slideUp(100);
});
$('ul li').click(function() {
$('ul',this).slideUp(100);
});
});
我已经尝试过 z-index，但它也不起作用。下面是css。
#nav {
margin: 0 0 0 5px;
padding: 0;
list-style: none;
}
#nav li {
float: left;
display: block;
position: relative;
background: #025b87;
z-index: 500;
}
#nav li a {
display: block;
padding: 8px 5px 0 5px;
height: 23px;
text-decoration: none;
color: #FFFFFF;
text-align: left;
color: #FFFFFF;
}
#nav li a:hover {
background-color: #d1d3d4;
color: #000000;
border-width:1px;
}
#nav li ul li a:hover {
background-color: #d1d3d4;
color: #000000;
}
【问题讨论】：
-
你能在 jsfiddle 中举一个例子让我们更好地理解这个问题吗？
-
最近我发现浮动元素似乎不尊重 z-index。我不确定为什么或是否总是如此。尽管如此，如果您可以避免浮动，那可能会解决您的问题。您也可以尝试将 z-index 直接应用于 #nav，因为它不是浮动的。
-
我已经弄清楚了，对话框的默认 zindex 是 1000，我给导航菜单提供了 500 zindex。所以这意味着zindex越高，元素的优先级越高。所以我必须给出高于对话框默认 zindex 值的值。所以我将#nav li zindex 设为 1500 或任何大于 1000 的值。现在 1500>1000。所以堆栈中#nav li 的优先级现在大于 jquery 对话框。我会把这个作为答案。