div標籤的高度屬性不允許菜單欄的子菜單

Question

我想顯示三個水平內容。水平內容如下。

1）徽標在左側。它已被完成 2）菜單欄與菜單和子菜單與一些基本的CSS類。 3）谷歌地圖

這三個內容應該放在所有瀏覽器的固定高度。所以我爲這三個水平div內容設置了固定的高度。但菜單欄的SubMenu不顯示。因爲我的固定div內容（中間存在）。我不知道如何解決它。任何幫助深表感謝。我的代碼如下。我已經使用菜單欄

**//Content ONE** 
<div id="HeadContainer" style="height: 62px;"> 
    <div id="logoHolder" style="float: left;"> 
     <img src="logo/image.gif" alt="Company Logo" /> 
    </div> 
</div> 
<hr />**//Content TWO** 
<div id="menubar" style="height: 28px;"> 
    <ul class="dropdown"> 
     <li><a href="#">Draw Region</a> 

      <ul class="sub_menu"> 
       <li><a href="#">Add New Region</a> 

        <ul> 
         <li><a href="#" onclick="initializePolygon()">Polygon Tool</a> 
         </li> 
         <li><a href="#" onclick="initializeRectangle()">Rectangle Tool</a> 
         </li> 
         <li><a href="#" onclick="initializeCircle()">Circle Tool</a> 
         </li> 
        </ul> 
       </li> 
       <li><a href="#" onclick="stopDrawing()">Stop Drawing Region</a> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#"> Edit Region </a> 
     </li> 
     <li><a href="#">Remove Region</a> 
     </li> 
    </ul> 
</div> 
<hr />**//Content THREE** 
<div id="map-canvas" style="height: 400px"></div> 
<hr /> 

CSS是繼

我還沒有編碼以下。我剛剛從網上覆制了腳本。但它沒有什麼問題。

ul.dropdown { 
    position: relative; 
} 
ul.dropdown li { 
    font-weight: bold; 
    float: left; 
    zoom: 1; 
    background: #ccc; 
} 
ul.dropdown a:hover { 
    color: #000; 
} 
ul.dropdown a:active { 
    color: #ffa500; 
} 
ul.dropdown li a { 
    display: block; 
    padding: 4px 8px; 
    border-right: 1px solid #333; 
    color: #222; 
} 
ul.dropdown li:last-child a { 
    border-right: none; 
} 
/* Doesn't work in IE */ 
ul.dropdown li.hover, ul.dropdown li:hover { 
    background: #F3D673; 
    color: black; 
    position: relative; 
} 
ul.dropdown li.hover a { 
    color: black; 
} 
/* 
    LEVEL TWO 
*/ 
ul.dropdown ul { 
    width: 220px; 
    visibility: hidden; 
    position: absolute; 
    top: 100%; 
    left: 0; 
} 
ul.dropdown ul li { 
    font-weight: normal; 
    background: #f6f6f6; 
    color: #000; 
    border-bottom: 1px solid #ccc; 
    float: none; 
} 
/* IE 6 & 7 Needs Inline Block */ 
ul.dropdown ul li a { 
    border-right: none; 
    width: 100%; 
    display: inline-block; 
} 
/* 
    LEVEL THREE 
*/ 
ul.dropdown ul ul { 
    left: 100%; 
    top: 0; 
} 
ul.dropdown li:hover > ul { 
    visibility: visible; 
} 

Answer 1

的子菜單地圖背後隱藏的，添加z-index: 100到ul.dropdown ul，它應該是在它的前面。檢查the demo。