0

我有一个不错的 CSS3 菜单，效果很好，但我也加入了1140px 网格系统。1140px 系统有一个如下所示的类：

.row {
 width: 100%;
 max-width: 1140px;
 min-width: 755px;
 margin: 0 auto;
 overflow: hidden;
}

这overflow: hidden;是阻止菜单上的菜单下拉菜单正常工作。这是菜单的 HTML：

<div class="row">
<div class="twelvecol logo">
<h1><a href="/">Logo</a></h1>

   <div id="navigation">
    <ul>
    <li><a href="#">Home</a></li>

    <li>
        <a href="#">2012</a>

        <ul>
            <li><a href="#">January</a></li>

            <li><a href="#">February</a></li>

            <li><a href="#">March</a></li>

            <li><a href="#">April</a></li>

            <li><a href="#">May</a></li>

            <li><a href="#">June</a></li>

            <li><a href="#">July</a></li>

            <li><a href="#">August</a></li>

            <li><a href="#">September</a></li>

             <li><a href="#">October</a></li>
        </ul>
    </li>
  <!-- MORE CODE -->

我试图通过添加来覆盖溢出属性，overflow: visible !important;但这完全破坏了页面。

谁能帮助解决问题并正确显示菜单而无需删除 1140px 网格系统？

这是我创建的 jsFiddle。

注意：如果可行的话，我不介意使用使用 jQuery 的解决方案。

4

4 回答 4

2

将以下内容添加到 CSS 可以解决问题

#navigation ul
{
    position: absolute;
left: 500px;
min-width: 300px;
}

工作演示

于 2012-10-05T06:05:06.793 回答
1 
#navigation ul{
  position:absolute;
 right:0;
}
#navigation li ul{
 width:110px;
 }
于 2012-10-05T06:25:17.767 回答
0

尝试在您的容器中添加一个新类：

<div class="row notoverflow">

在你的 CSS 中：

.row.notoverflow{overflow:auto}

在你的容器的末端

<div class="row notoverflow">. . .
    <div style="clear:both"></div>
</div>

没有这个overflow:hidden属性，容器的高度不会随着他的内容而增加……另一种方法是清除浮动。

于 2012-10-05T05:56:53.067 回答
0

您还可以从包含的 div 中删除整个 Nav div，以便它在文档流中排在第一位……如上

于 2012-10-05T06:17:36.683 回答