CSS下拉菜單由父DIV高度被切斷

在我的設置，我有我的導航欄水平設置和我的頭專區內包含這樣的：CSS下拉菜單由父DIV高度被切斷

<div id="header-section"> 
    <div id="main-menu-wrapper"> 
     <ul id="main-menu"> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="#">Services</a> 
       <ul id="sub-men"> 
        <li><a href="#">Service 1</a></li> 
        <li><a href="#">Service 2</a></li> 
        <li><a href="#">Service 3</a></li> 
       </ul> 
      </li> 
     </ul> 
     <div class="clear"></div> 
    </div> 
</div>

我的問題是，子菜單不顯示，因爲「main-menu-wrapper」上的高度設置爲auto。當我設置100px的高度時，子菜單顯示。當我將子菜單上的位置設置爲靜態而不是絕對位置時，它將展開整個主菜單包裝。我怎樣才能讓子菜單正確顯示？

下面是我的整個頭部分的CSS部分：

#header-section { 
position: relative; 
width: 100%; 
padding: 5px 0px; 
background: #740600; 
} 

#main-menu-wrapper { 
position: relative; 
width: 74%; 
min-width: 600px; 
height: auto; 
margin: 0% auto; 
} 

#main-menu { 
list-style: none; 
font-weight: bold; 
line-height: 150%; 
} 

#main-menu li { 
position: relative; 
float: right; 
margin: 0px 5px; 
} 

#main-menu a { 
padding: 3px; 
color: #ffffff; 
background: #740600; 
text-decoration: none; 
border-radius: 5px; 
} 

#main-menu a:hover { 
padding: 3px; 
color: #740600; 
background: #ffffff; 
text-decoration: none; 
} 

#main-menu li ul { 
position: absolute; 
display: none; 
} 

#main-menu li ul li{ 
float: none; 
} 

#main-menu li:hover ul { 
display: block; 
} 

#main-menu li ul a { 
padding: 3px; 
color: #ccc; 
background: #740600; 
text-decoration: none; 
border-radius: 5px; 
} 

#main-menu li ul a:hover { 
padding: 3px; 
color: #740600; 
background: #ccc; 
text-decoration: none; 
} 


#banner-wrapper { 
position: relative; 
padding: 5px 0 5px; 
} 

#banner { 
position: relative; 
max-width: 75%; 
min-width: 600px; 
margin: 0% auto; 
background: #ffffff; 
} 

#logo { 
max-width: 600px; 
height: auto; 
}

來源

2012-12-13 Szuturon

你可以做一個小提琴或發佈你的CSS？ – Dim13i

我添加了CSS。 – Szuturon

您是否在包裝器上嘗試過'overflow：visible'或'overflow：auto'？ – EricG

您可以嘗試使用絕對定位的子菜單，從文檔流中刪除。

來源

2012-12-13 20:10:42 riverstorm

子菜單上的位置UL已經設置爲絕對位置。我認爲這會讓它展現在父包裝之外，但事實並非如此。 – Szuturon

我對你在這裏提出的問題有些困惑，但我在菜單顯示的地方創建了一個小提琴。

我刪除了＃main-menu-wrapper的樣式，並刪除了＃header-section上的背景顏色。

希望這可以爲你一個體面的起點：http://jsfiddle.net/44vRN/

#header-section { 
position: relative; 
width: 100%; 
padding: 5px 0px; 
}

來源

2012-12-13 20:16:22 WarrenBee

我需要＃主菜單包裝來居中我的頁面。 – Szuturon

我認爲你對所有這些div都有點複雜。我建議你重新開始，以便使用更簡潔的代碼。這裏有一個體面的教程：http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu – WarrenBee

哈哈是啊，我做了一種代碼自己到這個角落。我想辦法解決我的問題......這是一個馬虎的一半的措施，但我會採取。當我啓用我的橫幅廣告時，身高問題不是問題，而我只是使用z-index來確保菜單顯示在頂部。 – Szuturon

CSS下拉菜單由父DIV高度被切斷

回答

相關問題