css - div 标签的高度属性不允许菜单栏的子菜单

Question

我想显示三个横向内容。横向内容如下。

1) 标志在左侧。它已经完成2) 带有一些基本CSS类的菜单和子菜单的菜单栏。3) 谷歌地图

这三个内容应该为所有浏览器放置固定高度。所以我为这三个水平 div 内容设置了固定高度。但是菜单栏的子菜单没有显示出来。因为，我的固定 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

子菜单隐藏在 map 后面，在ul.dropdown ul中添加z-index: 100，应该在它的前面。检查the demo .