我遇到了CSS菜单的问题。我希望父级li
不被子菜单打扰。我希望父列表的宽度等于它们自己的文本内容,而不是内部ul
。我不想给父母列表特定的宽度。这是图像。
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>
答案 0 :(得分:3)
将position:absolute
添加到.subm
答案 1 :(得分:2)
我检查了你的jsfiddle @Hanzallah Afgan。试试这个
删除.nav的溢出:隐藏的css属性,然后子菜单将显示