jquery - IE7 表现奇怪，悬停在 ul li 列表上没有任何中断

Question

我有一个 Action 列表，当我将鼠标悬停在链接上时会显示该列表。它在 firefox 3.6 和 Ie8 中工作正常，但在 IE7 中工作不一样。

这是我的代码:

<td class="noTableStyle">
 <a href="#">Actions</a>
  <ul>
   <li><a href="#" title="Edit">Edit</a></li>
   <li><a id="Delete" href="#">Delete</a></li>
  </ul>
</td>

这是我的 Jquery 代码:

$(document).ready(function() {
        //Initialize action menu behaviour
        $("td.noTableStyle ul").hide();
        $("td.noTableStyle a").hover(function() {
            $(this).next().slideDown('fast');
        });
        $("td.noTableStyle").hover(null, function() {  $(this).children("ul").slideUp('fast'); });
   });

这是我的 CSS:

d.noTableStyle { 
    background-color:Transparent;
}
td.noTableStyle ul { 
    margin-top:0px; 
    list-style-type:none;
    z-index: 2; 
    position:absolute;
    float:left; 
    background-color: #EBF5F8;
    margin-left: 1px;
    padding-left:0px;
}
td.noTableStyle ul {
    background-color:#EBF5F8; 
    padding:2px;
}

在 firefox/IE8 中，链接显示在操作中，但在 IE7 中，编辑和删除链接出现在右侧。

我真的很想得到一些帮助。谢谢大家

Answer 1

position: absolute;的组合和 float: left;让它粘在链接的右侧。因为您想将它放在正下方 链接和 <ul>默认情况下已经是一个 block 元素，我看不到制作它的任何值(value) position: absolute; float: left; .所以我建议只删除这些属性。它将以您期望的方式在所有浏览器中运行。