子菜单扩展父 div 而不是显示在顶部 [英] Sub-menu expanding parent div instead of displaying on top

问题描述

我刚刚加入了 Stack Overflow，希望有人能帮我找到水平菜单的解决方案.我的子菜单似乎扩展了父 div 而不是显示在它上面.这是我的代码.

HTML 代码:

<ul><li><a id="" class="" href="">Home</a></li><li><a id="" class="" href="">关于我</a><ul class="子菜单"><li><a href="">个人简介</a></li><li><a href="">图片库</a></li><li><a href="">脚印</a></li><li><a id="" class="" href="">专业知识</a></li><li><a id="" class="" href="">项目</a><ul class="子菜单"><li><a href="">Geo 228 Portal</a></li><li><a href="">NEP 应用程序</a></li><li><a href="">地理地址簿</a></li><li><a href="">资产管理</a></li><li><a id="" class="" href="">联系方式</a></li>

CSS 代码:

#menu {位置:相对；字体大小:0.8em；边距:0；填充:0；背景色:#666666；边框顶部:1px 实心 #999；边框底部:1px 实心 #999；溢出:隐藏；z-索引:2；}#menu ul {位置:相对；边距:0；填充:0；列表样式:无；z-索引:3；}#菜单里{显示:块；宽度:120px；向左飘浮;右边框:1px 实心 #999；z-索引:4；}#菜单一个{颜色:#ffffff；字体粗细:粗体；显示:块；文本对齐:居中；文字装饰:无；文本转换:大写；边距:0；填充:10px 20px；}#菜单a:悬停{颜色:#000000；边距:5px 10px；填充:5px 10px；背景颜色:#C0C0C0；边框半径:10px；}#menu ul.sub-menu {显示:无；位置:相对；}#menu ul.sub-menu li {宽度:200px；背景颜色:#C0C0C0；边框宽度:0 1px 1px 1px;边框样式:实心；边框颜色:#666666；}#menu ul.sub-menu li a {颜色:#000；文本对齐:居中；边距:5px 10px；填充:5px 10px；}#menu ul.sub-menu li a:hover {颜色:雪；背景色:#666666；}#menu li:hover ul.sub-menu {显示:块；z-索引:90；}

谢谢

解决方案

我在菜单 div 中添加了以下内容

溢出:可见；高度:35px；

我更新了你的 JsFiddle

I just joined Stack overflow and I'm hoping someone will help me find a solution for an horizontal menu. My sub-menus seems to extend the parent div instead of displaying on top of it. Here is my codes.

HTML Codes:

<div id="menu">
            <ul>
                <li><a id="" class="" href="">Home</a></li>
                <li><a id="" class="" href="">About Me</a>
                    <ul class="sub-menu">
                        <li><a href="">Biography</a></li>
                        <li><a href="">Photo Galery</a></li>
                        <li><a href="">Foot Print</a></li>
                    </ul>
                </li>
                <li><a id="" class="" href="">Expertise</a></li>
                <li><a id="" class="" href="">Projects</a>
                    <ul class="sub-menu">
                        <li><a href="">Geo 228 Portal</a></li>
                        <li><a href="">NEP Application</a></li>
                        <li><a href="">Geo Address Book</a></li>
                        <li><a href="">Assets Management</a></li>
                    </ul>
                </li>
                <li><a id="" class="" href="">Contact</a></li>
            </ul>
        </div>

CSS Codes:

#menu {
    position: relative;
    font-size: 0.8em;
    margin: 0;
    padding: 0;
    background-color: #666666;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    overflow: hidden;
    z-index: 2;
}


#menu ul {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 3;
}

#menu li {
    display: block;
    width: 120px;
    float: left;
    border-right: 1px solid #999;
    z-index: 4;
}

#menu a {
    color: #ffffff;
    font-weight: bold;
    display: block;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    margin: 0;
    padding: 10px 20px;
}

#menu a:hover {
    color: #000000;
    margin: 5px 10px;
    padding: 5px 10px;
    background-color: #C0C0C0;
    border-radius: 10px;
}

#menu ul.sub-menu {
    display: none;
    position: relative;
}

#menu ul.sub-menu li {
    width: 200px;
    background-color: #C0C0C0;
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: #666666;
}

#menu ul.sub-menu li a {
    color: #000;
    text-align: center;
    margin: 5px 10px;
    padding: 5px 10px;
}

#menu ul.sub-menu li a:hover {
    color: snow;
    background-color: #666666;
}

#menu li:hover ul.sub-menu {
    display: block;
    z-index: 90;
}

Thank you

解决方案

I added the following to the menu div

overflow: visible;
height: 35px; 

I updated your JsFiddle

这篇关于子菜单扩展父 div 而不是显示在顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！