height attribute of div tag is not permitting the sub menus of menu bar

Question

I would like to diplay three horizontal contents. The horizontal contents are following.

1) Logo at the left side. It has been done 2) Menu bar with menus and sub menus with some basic css class. 3) Google map

These three contents should be placed fixed height for all the browsers. So I have set fixed height for these three horizontal div contents. But SubMenu of Menu bar are not showing up. Because, of my fixed div content (which is present in the middle). I dont know how to fix it. Any help is much appreciated. My code are below.

**//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 I have used for menu bar is following

I have not coded the following. I just copied the script from the net. But it is good nothing problem in it.

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

The submenu is hidden behind the map, add z-index: 100 to ul.dropdown ul, and it should be in front of it. Check the demo.