我在使用 z-index 和 ie 时遇到了麻烦。下拉菜单显示在其他菜单下方。有没有人对如何让 ie 确认 z-index 有任何建议?
下拉菜单在表格中...
<table>
<tr>
<td>
<ul class="dropdown">
<li>View ▼
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
</ul>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul class="dropdown">
<li>View ▼
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
CSS:
td{ padding:5px; border: 1px solid #aaa; }
ul.dropdown { height: 20px; position: relative; margin:10px;}
ul.dropdown > li { color:#222; background:#aaa; padding:5px; width:200px}
ul.dropdown > li:hover { color:#ddd; background:#403838; }
ul.dropdown li ul { display:none; position:absolute; z-index:100; left: 0; top:25px; }
ul.dropdown li ul li { }
ul.dropdown li ul li a { width:200px; display:block; padding:1px 5px; color:#fff; background:#444; border-top:1px solid #666; }
ul.dropdown li ul li a:hover { color:#fff; background:#888; }
jQuery:
$('.dropdown').hover(
function() {
$('ul', this).stop(true, true).slideToggle(100); },
function() {
$('ul', this).stop(true, true).slideToggle(100); }
);
最佳答案
已更新,您需要在悬停时将 z-index 添加到父容器。看这里:http://jsfiddle.net/qS47B/12/ .
注意附加类 ul.dropdown:hover { z-index:10;}
关于jquery - CSS 下拉菜单(使用 jQuery)- z-index 堆叠上下文在 ie 7 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5995495/