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

标签 jquery css blueprint-css superfish

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

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

最佳答案

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

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 。 (或类似的)在适当的地方。

关于jquery - 多容器蓝图网格和下拉菜单因此被切断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4821373/

相关文章:

css - 蓝图 CSS 压缩器脚本,我该如何使用它?

javascript - .each 循环中的 jQuery/Javascript Ajax POST 大约有 20% 的时间创建 6 个重复的帖子

php - 如何使用 ajax 从 PHP 循环逐步更新 div?

javascript - JqueryUI tooltip定位

html - 编译sass文件 "Error: Expected spaces, was tabs."

css - 使用 Blueprint CSS,我们如何设置 3 列的样式,每列 300 像素宽,中间有 15 像素的边距或填充?

javascript - 使用 jquery 附加按钮获取参数

css - 为什么 BEM 经常使用两个下划线而不是一个下划线作为修饰符?

html - 我将鼠标悬停在一个 p 上,但所有 p 都改变了背景,我在这里做错了什么?

html - 蓝图 : Push column partially in to another column