CSS子菜单令父母李先生感到不安

时间:2015-07-05 08:57:24

标签: html css

我遇到了CSS菜单的问题。我希望父级li不被子菜单打扰。我希望父列表的宽度等于它们自己的文本内容,而不是内部ul。我不想给父母列表特定的宽度。这是图像。enter image description here

CSS

ul {
    list-style: none;
}
.nav{
    padding-left: 70px;
    line-height: 60px;
    overflow: hidden;
}
.nav > li{
    float: left;
    font-size: 20px;
    margin-right: 18px;
    cursor: pointer;
    background: yellow;
}
.subm{
    overflow: hidden;
    width: 200px;
    list-style: none;
    line-height: normal;
    outline: 1px solid black;
    padding: 0;
    background: #252525;
    padding:  0 10px 10px 10px;
}
.subm > li{
    color: #ffde00;
    margin: 0;
    margin-top: 4px;
    padding-left: 6px;
    font-family: decker;
}

HTML

<ul class="nav">
        <li>Home</li>
        <li>Languages
            <ul class="subm">
                <li>C</li>
                <li>C++</li>
                <li>java</li>
                <li>c#</li>
            </ul>
        </li>
        <li>About</li>
</ul>

2 个答案:

答案 0 :(得分:3)

position:absolute添加到.subm

小提琴:http://jsfiddle.net/eryo2kjg/

答案 1 :(得分:2)

我检查了你的jsfiddle @Hanzallah Afgan。试试这个

删除.nav的溢出:隐藏的css属性,然后子菜单将显示