衝突的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溢出屬性 - 如何解決？

回答

相關問題