jquery - CSS 下拉菜单(使用 jQuery)- z-index 堆叠上下文在 ie 7 中不起作用

Question

http://jsfiddle.net/qS47B/6/

我在使用 z-index 和 ie 时遇到了麻烦。下拉菜单显示在其他菜单下方。有没有人对如何让 ie 确认 z-index 有任何建议？

下拉菜单在表格中...

<table>
<tr>
<td>
<ul class="dropdown">
    <li>View &#x25BC;
        <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 &#x25BC;
        <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); }
);

Answer 1

已更新，您需要在悬停时将 z-index 添加到父容器。看这里:http://jsfiddle.net/qS47B/12/ .

注意附加类 ul.dropdown:hover { z-index:10;}