3

我position: absolute;的容器内部有问题position: relative;

我认为，默认行为是，具有position: absolute;的子元素相对于其父容器定位自己，如果该元素具有position: absolute;或position: relative;

在尝试此操作时，我发现 FF 和 IE（最新版本）显示出不同的行为，将内容放在页面上。

想知道为什么？它涉及一个下拉菜单，其中子菜单left: -9999px;在悬停时从视口中取出left: auto;

在 Chrome 中，它工作正常。抱歉，如果这个问题已经被问过 - 但使用这样的词进行搜索只会显示位置的正常问题。

代码：

<div id="steuerung">
<ul>
  <li><a href="#">Link</a>

    <ul>
     <li><a href="#">Sublink</a> </li>
     <li><a href="#">Sublink</a> </li>
     <li><a href="#">Sublink</a> </li>
     <li><a href="#">Sublink</a> </li>
     <li><a href="#">Sublink</a></li>
    </ul>
  </li>
</ul>
</div>

CSS：

div#steuerung li {
    display: inline;
    list-style: none;
    position: relative;
}
div#steuerung ul li ul {
    position: absolute;
    left: -9999px;
    display: block;
    z-index: 2;
    width: 99%;
}
div#steuerung ul li:hover ul {
    left: auto;

}

在此处完成代码：www.step-town.com/new/

问候

4

1 回答 1

1

试试这个

http://jsfiddle.net/3Nh86/

我认为最好的方法是在你的 ul 子菜单上使用“display：none”和“display：block”，无需 Javascript。

于 2012-08-29T11:22:31.570 回答