Question

我有一个很好的CSS3菜单，但是我也加入了1140px Grid System。 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 I created。

注意：我不介意使用使用jQuery的解决方案，如果这是有效的。

Answer 1

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

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

WORKING DEMO

Answer 2

#navigation ul{
  position:absolute;
 right:0;
}
#navigation li ul{
 width:110px;
 }

Answer 3

尝试在容器中添加新类：

<div class="row notoverflow">

在你的css中：

.row.notoverflow{overflow:auto}

并在容器的末尾

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

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

Answer 4

您还可以从包含div中删除整个Nav div，以便它首先出现在文档流程中....如上所述

冲突的CSS溢出属性 - 如何修复？

4 个答案: