多容器蓝图网格和下拉菜单因此被切断

Question

我的标题（蓝图）容器中有一个下拉菜单（我正在使用 superfish jquery/css 插件）。我还有一个页脚和主要内容容器。 （我拥有它们，这样我就可以在每个中都有背景来填充浏览器宽度）。问题是下拉菜单（下拉部分）被切断，因此当其容器结束且下一个容器开始时您看不到子菜单链接。通过不将下拉菜单放入容器中，我可以避免这种情况，但菜单无法很好地对齐。

有没有办法可以在标题周围使用蓝图容器而不将其切断？或者我可以尝试一些CSS使其与网格对齐？ （我使用的是 960px 宽的网格——我尝试复制所有相关的 css，但由于某种原因它仍然没有对齐，所以也许我错过了一些东西）

我已经包含了一些可能相关的 css...我很不情愿，因为它仍然有点混乱，但我认为所有的 div 都有原因...:(（我认为使用 #menu 来分隔 sf-menu 和导航栏上的其他链接，#nav_container 是为了设置栏的样式，蓝图网格必须包含在 .container 中，并尝试将 superfish.css 中的代码与我自己的样式分开，直到我弄清楚发生了什么 - 我也不确定在以下大部分内容中我实际需要哪些属性css，因为我遵循了一些示例，没有解释） 另外，我使用带有蓝图的 Compass/sass Rails 插件，因此最终结果可能比普通 css 更详细...

body .container {
  width: 950px;
  margin: 0 auto;
  overflow: hidden;
  *zoom: 1;
}

#nav_container {
  height: 34px;
  width: 100%;
  line-height: 36px;
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0;
}

#nav_container ul a {
  display: block;
}

#nav_container ul li {
  float: left;
  position: relative;
  top: -1px;
}
#nav_container #menu {
  display: inline;
  float: left;
  margin-right: 0;
  width: 950px;
  margin: 0 auto;
}

* html #nav_container #menu {
  overflow-x: hidden;
}

#nav_container #menu .sf-menu {
  width: 950px;
  margin: 0;
  margin-right: 0;
  display: block;
  float: left;
}

/*superfish stuff, edited from superfish.css*/

/* line 8, ../../app/stylesheets/partials/_superfish.sass */
.sf-menu ul {
  position: absolute;
  top: -999em;
  width: 10em;
}
.sf-menu ul li {
  width: 100%;
}
.sf-menu ul:hover {
  visibility: inherit;
  /* fixes IE7 'sticky bug' */
}
.sf-menu li {
  float: left;
  position: relative;
  /* match top ul list item height */
}
.sf-menu li:hover ul, .sf-menu li.sfHover ul {
  left: 0;
  top: 3em;
  z-index: 2;
}
.sf-menu a {
  display: block;
  position: relative;
}
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul {
  top: -999em;
}
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul {
  left: 10.75em;
  /*adjust this if not using rounded corners etc */
  top: 0;
}
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul {
  top: -999em;
}
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul {
  left: 10em;
  /* match ul width */
  top: 0;
}

/** DEMO SKIN ** */
.sf-menu {
  float: left;
  margin-bottom: 1em;
}

HTML：

<div id='headerbg'> #this is a wrapper so the header has a full width bg image, just has a background property
              some stuff here
              <div id='nav_container'> 
                <div class='container'> 
                  <div id='menu'> 
                    <ul class='sf-menu'> 
                      <li><a href="/">Home</a></li> 
                      <li><a href="/about">About</a></li> 
                      <li><a href="#">Account</a> 
                        <ul> 
                          <li><a href="#">Settings</a> </li>
                          <li><a href="#">Other link</a></li>
                        </ul> 
                      </li>
                    </ul>
                  </div> 
                </div> 
              </div> 
            </div>

因此，如果我将鼠标悬停在主菜单中的“帐户”上，则会有一个下拉菜单，但“设置”和其他链接被切断。

Answer 1

我认为您遇到了溢出问题：

body .container {
  /*...*/
  overflow: hidden;
  /*...*/
}

div.container 的高度将是内部

的高度加上一点位用于 .container 内发生的任何填充/边距/...。当您将鼠标悬停在其中一个菜单项上以激活 Superfish/Suckerfish 内容时，子项将出现并被 .container 上的 overflow:hidden 设置剪裁。

删除 overflow:hidden ，您的裁剪问题就会消失。如果您使用 overflow:hidden 作为清除修复，那么您必须使用

< 手动清除浮动;/div> （或类似的）在适当的地方。

Answer 2

编辑： 现在我已经看到了你的代码，我想我更好地知道该怎么做了......见下文：

我几乎肯定这是一个<将 Superfish DDM 与 Blueprint.css 相结合产生的 code>z-index 问题。

如果我是正确的，解决方案是将非常高的 z-index 属性添加到下拉导航的最近定位祖先。在您的情况下，添加：

#nav_container { z-index:600; }

如果这不起作用，请尝试定位直接祖先并为其指定 z-index：

#menu { position:relative; z-index:600; }

注意：在您的代码中，您只创建了 z-index 2...我会将其设置为更高的值，例如 600 或 4000 或 99999。您选择什么数字并不重要，只要它非常大并且您知道没有其他元素会被赋予更高的 z -索引。