综合技术

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

微信扫一扫,分享到朋友圈

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

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;
}

Problem courtesy of: ArunRaj

阅读原文...


微信扫一扫,分享到朋友圈

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

CSS3 Recipes

你和名企的距离,差的不只是985/211或研究生学历

上一篇

VMware 收购 Avi Networks,加速多云环境交付

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

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

长按储存图像,分享给朋友