Css 位置：absolute在Opera/FF/IE中将内容向右推，但不使用Webkit浏览器

我使用960gs以标准的一栏为中心布局页面，先是页眉，然后是导航，然后是内容，最后是页脚

导航内部有垂直列表。如果客户机启用了javascript，那么使用JQuery的列表将设置为悬停时弹出，方法是将较低li的显示从none更改为block

这意味着导航具有position:relative和高z索引，内容设置为position:absolute，以便列表在内容顶部流动。否则，内容将向下移动以适应列表

它在Safari v5和Chrome v11中工作得非常好。然而，FF v10和Opera v11和IE，但这是给定的；决定从导航右边缘的左侧开始偏移内容，使其向右偏移800像素左右

我试图通过将容器位置设置为相对来解决这个问题，但这没有任何作用。简单地说，直线位置：绝对；是改变一切的人

我在这里的CSS/定位知识有限，因此非常感谢您的帮助

我在这里使用了Haml，因为编写HTML非常麻烦和冗长，但即使您不了解Haml，您也会理解：

#container.container_16
  #header.prefix_3.grid_10
    %h1
      My wonderful web site
  #nav.prefix_3.grid_10
    %ul.vert_nav.grid_2
      %li.head
        Home
      %li.sub
        About
      %li.sub
        Contact us
  #content.prefix_3.grid_10
    %p
      Lorem ipsum...

  #footer
    %p
      You've reached the end.

一点CSS：

#container {
  height: auto !important;
  min-height: 100%;
  position: relative;
}

#content { 
  height: 100%;
  padding-bottom: 1em;
  padding-top: 0.2em;
  position: absolute;
  z-index: 1;
}

.container_16 .grid_10 { 
  width: 580px;
}

.container_16 .prefix_3 { 
  padding-left: 180px;
}
.container_12, .container_16 { 
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

#nav ul.vert_nav li { 
  margin-left: 0.3em;
  margin-right: 0.3em;
  text-align: center;
}

#nav li.sub { 
  background-color: #000000;
  display: block;
  position: relative;
  z-index: 500;
}

还有一些js：

(function() {

  jQuery(function($) {
    $("li.sub").toggle();
    $("#content").css("top", "12em");
    return $("ul.vert_nav").mouseenter(function() {
      return $(this).find("li.sub").show();
    }).mouseleave(function() {
      return $(this).find("li.sub").hide();
    });
  });

}).call(this);

总之：

为了允许菜单在内容上方飞行，我需要content div上的position absolute。 它必须与960gs一起工作。

---

要超出这些要求，需要有一个真正坚实的理由。

与其绝对定位内容，不如绝对定位下拉项

例如，您可以：

HTML

---

工作示例：

您应该完全定位下拉列表元素，而不是内容。@MyHeadharts看起来很有效，只是现在我无法在不处理新定位问题的情况下动态添加或删除菜单，但这比我遇到的问题要好得多！非常感谢。你愿意加上那个作为答案吗？这样我就可以把它标对了。我已经加上了那个作为答案。你有什么新的定位问题？以前，额外的列表会动态添加到末尾，例如，如果你是管理员，则会添加一个管理员菜单，并且它们只会沿着末尾堆叠，因此每列都是ul。既然它们是绝对的，我需要提前给它们一个水平的位置，否则它们都坐在彼此的上面。这意味着，根据用户可以访问的菜单，可能会有间隙。我使用的是SASS，所以也许有一种方法可以计算值，但这仍然是一个比以前更好的问题。如果我找不到方法，我会打开一个新问题并链接到它。也谢谢你的例子。

<ul>
    <li>
        No drop down
    </li>
    <li>
        A drop down
        <ul>
            <li>option 1</li>
            <li>option 2</li>
        </ul>
    </li>
</ul>

ul li {
    display: inline-block;
    position: relative;        /* for the absolutely positioned children */
}

ul li ul {
    position: absolute;
    top: 1em;
    left: 0px;
}