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>

因此，如果我将鼠标悬停在主菜单中的帐户上，则会显示下拉菜单的smidgen，但会关闭“设置”和“其他”链接。

Answer 1

我认为你有一个溢出问题：

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

div.container的高度将是内<ul class="sf-menu">的高度加上.container内的填充/边距/ ...的一点点。当您将鼠标悬停在其中一个菜单项上以激活Superfish / Suckerfish时，子项将显示并被overflow: hidden上的.container设置剪切。

删除overflow:hidden，您的裁剪问题应该消失。如果您使用overflow:hidden作为明确修复，那么您必须在适当的位置用<div style="clear: both;"></div>（或类似的）手动清除浮动。

Answer 2

编辑： 现在我已经看到了您的代码，我想我知道该怎么做...请参阅下文：

我几乎肯定这是将Superfish DDM与Blueprint.css结合起来的z-index问题。

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

#nav_container { z-index:600; }

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

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

注意：在你的代码中，你只做了z-index 2 ...我会把它变得更高，比如600或4000或99999.你选择的数字并不重要，同样长因为它非常大，你知道没有其他元素会被赋予更高的z-index。

由于它，多容器蓝图网格和下拉菜单被切断

2 个答案: