Question

我正在使用960gs来布局页面，标准的一列居中布局，标题然后导航然后内容然后页脚。

#nav里面有垂直列表。如果客户端启用了javascript，则列表（使用JQuery）将设置为在悬停时弹出（通过将较低li的显示从none更改为block）。

这意味着#nav具有position: relative和高z-index，＃content设置为position: absolute，以便列表流过内容的顶部。否则，内容会向下移动以容纳列表。

它在Safari v5和Chrome v11中运行良好。但是，FF v10和Opera v11（以及IE，但这是给定的;）决定从导航右边缘的左侧开始偏移#content，所以右边大约800像素。 / p>

我已经尝试通过将#container位置设置为relative来解决这个问题，但这没有做任何事情。简而言之，行position: absolute;就是改变事物的那一行。

我的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);

总结：

要允许菜单飞过内容的顶部，我需要在内容div上保持绝对位置。
必须使用960gs。

要超出这些要求，它必须是一个非常可靠的理由。

Answer 1

绝对不应该定位#content，而应该绝对定位下拉项目。

例如，您可以：

HTML 的

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

CSS

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

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

工作示例：http://jsfiddle.net/JeAH8/

position：绝对在Opera / FF / IE中将内容推送到右侧，而不是在Webkit浏览器中

1 个答案: