冲突的CSS溢出属性 - 如何解决？

我有一个不错的CSS3菜单，但效果很好，但我也加入了1140px Grid System。该1140px系统具有一类，看起来像这样：冲突的CSS溢出属性 - 如何解决？

.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;覆盖overflow属性，但完全打破了网页。

任何人都可以使用，将解决这个问题，并妥善显示菜单，而无需去除1140px网格系统的解决方案帮助吗？

这是jsFiddle I created。

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

<div class="row notoverflow">

在你的CSS

：

来源

2012-10-05 L84

添加以下的CSS解决问题

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

WORKING DEMO

来源

2012-10-05 06:05:06

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

.row.notoverflow{overflow:auto}

，并在你的容器

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

结束没有overflow:hidden财产，容器高度不会随着他的内容而增加......另一种方法是清除漂浮物。

来源

2012-10-05 05:56:53

这是行不通的。当菜单悬停时，会导致滚动条出现。 – L84

尝试溢出：可见 –

我给你一个替代方式的溢出：隐藏在你的.row ...问题是在你的菜单中...他推动的内容，你必须给它一个位置：绝对' –

你也可以从包含div内删除整个导航DIV，使其至上的文件流... .as以上

来源

2012-10-05 06:17:36

在div class =“row”元素上方.... –

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

来源

2012-10-05 06:25:17 Afshin

冲突的CSS溢出属性 - 如何解决？

回答

相关问题