下拉菜單出現在div外的其他內容後面

我創建了一個使用javascript的導航菜單。我在主菜單中的部分下拉菜單，但是當我點擊箭頭它只顯示下拉到div的結束（見圖片）：下拉菜單出現在div外的其他內容後面

enter image description here

我怎樣才能得到它所以下拉菜單顯示在最上面。我已嘗試溢出：可見，但這似乎並沒有工作。

HTML：

<div id="top_bar"> 
<div id="top_inner"> 
<div id="logo"> <a href="http://www.edosbornephotography.com"><img src="images/logo.gif" alt="Ed Osborne" width="220" height="100" class="logo"></a></div> 
<div class="nav"> 
<ul class = "menu" > 
      <li> <a href = "#" > Home </a> </li> 
      <li><a href = "#" > Tutorials </a> 
     <ul class = "submenu" > 
      <li> <a href = "#" > CSS </a> </li> 
      <li> <a href = "#"> Javascript </a> </li> 
      <li> <a href = "#" > jQuery </a> </li> 
      <li> <a href = "#"> HTML </a> </li> 
      <li> <a href = "#" > PHP </a> </li> 
     </ul> 
     </li>

CSS：

.nav { 
margin: 0 auto; 
position: relative; 
padding-top: 85px; 
} 

ul.menu { 
list-style: none; 
padding: 0 22px; 
margin: 0; 
float: left; 
background: #222; 
font-size: 1.2em; 
background: url(../images/topnav_bg.gif) repeat-x; 
} 

ul.menu li { 
float: left; 
margin: 0; 
padding: 0 15px 0 0; 
position: relative; 
} 

ul.menu li ul.submenu { 
list-style: none; 
position: absolute; 
left: 0; top: 35px; 
background: #333; 
margin: 0; padding: 0; 
display: none; 
float: left; 
width: 170px; 
-moz-border-radius-bottomleft: 5px; 
-moz-border-radius-bottomright: 5px; 
-webkit-border-bottom-left-radius: 5px; 
-webkit-border-bottom-right-radius: 5px; 
border: 1px solid #111; 
} 

ul.menu li ul.submenu li{ 
margin: 0; padding: 0; 
border-top: 1px solid #252525; 
border-bottom: 1px solid #444; 
clear: both; 
width: 170px; 
} 

html ul.menu li ul.submenu li a { 
float: left; 
width: 145px; 
background: #333 url(../images/dropdown_linkbg.gif) no-repeat 10px center; 
padding-left: 20px; 
}

來源

2012-09-03 user1278496

你需要

ul.menu li ul.submenu { 
z-index: 5000; // <-- ADD THIS 
list-style: none; 
position: absolute; 
left: 0; top: 35px; 
background: #333; 
margin: 0; padding: 0; 
display: none; 
float: left; 
width: 170px; 
-moz-border-radius-bottomleft: 5px; 
-moz-border-radius-bottomright: 5px; 
-webkit-border-bottom-left-radius: 5px; 
-webkit-border-bottom-right-radius: 5px; 
border: 1px solid #111; 
}

----編輯根據您的評論使用Z-指數在子菜單標籤以下----

等待 - 我認爲我們根據您的評論誤導了您 - 您希望子菜單向上移動，以便它位於現有菜單的上方？（相對於頁面上的內容上面？）如果是這樣，你需要做的子菜單上的這樣一個負的margin-top：

ul.submenu { 
    margin-top:-2em; // adjust me (use 'em' to scale w/ font size adjustments) 
}

需要「的立場：絕對的;」對於這個工作，但你已經有這個類在你的CSS

來源

2012-09-03 20:42:11 RobertMaysJr

謝謝你，但它沒有出現工作 – user1278496

也許不是你的問題在這裏，但不使用屬性name = value對之間的空格。 IE 應該讀 – jtheman

好吧，但是什麼原因呢？ – user1278496

我相信答案是z-索引，但z-索引只適用於positoned元素。如果添加

ul.menu li ul.submenu { 
    z-index: 5000; 
    position: relative;

它shoukd工作}

來源

2016-03-24 20:05:11

下拉菜單出現在div外的其他內容後面

回答

相關問題