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

Question

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

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

我已经包含了一些可能相关的 css...我不太情愿，因为它仍然有点乱，但是我有所有 div 的原因，我认为...:((我认为使用了#menu 来分隔 sf - 导航栏上的菜单和其他链接，#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的高度将是内部的高度 <ul class="sf-menu">加上一点填充/边距/...内部发生的事情.container .当您将鼠标悬停在其中一个菜单项上以激活 Superfish/Suckerfish 东西时， child 将出现并被 overflow: hidden 剪裁设置 .container .

删除 overflow:hidden你的剪辑问题应该消失了。如果您使用 overflow:hidden作为一个明确的修复，那么你必须用 <div style="clear: both;"></div> 手动清除你的 float 。 (或类似的)在适当的地方。