0

我的标题（蓝图）容器中有一个下拉菜单（我正在使用 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>

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

4

2 回答 2

1

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

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

的高度div.container将是内部的高度<ul class="sf-menu">加上一点内部的填充/边距/...正在发生的事情.container。overflow: hidden当您将鼠标悬停在菜单项之一以激活 Superfish/Suckerfish 东西时，孩子将出现并被.container.

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

于 2011-02-02T03:14:01.597 回答
0

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

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

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

#nav_container { z-index:600; }

如果这不起作用，请尝试定位直接祖先并给它一个z-index：

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

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

于 2011-02-01T19:12:11.577 回答