我有一个水平菜单栏,但子菜单有问题。我希望子菜单与其标题具有相同的宽度(top li?)。
我知道一种解决问题的方法,即为顶部 li 元素提供固定宽度,但我不想那样做。我希望每个类别都有自己的宽度。有其他方法可以解决这个问题吗?
<div id="header">
<div class="container">
<div class="menu-container">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">aaaaaaaaaa</a>
<ul>
<li><a href="#">blabla</a></li>
<li><a href="#">bla bla</a></li>
<li><a href="#">blabla bla</a></li>
</ul>
</li>
<li><a href="#">bbbbbbbbbb</a>
<ul>
<li><a href="#">blabla</a></li>
<li><a href="#">bla bla blabla</a></li>
</ul>
</li>
<li><a href="#">cccccccc</a>
<ul>
<li><a href="#">bla</a></li>
</ul>
</li>
<li><a href="#">ddddd</a></li>
</ul>
</div>
</div>
</div>
<div id="content" class="wrapper"></div>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: auto;
}
body {
background: rgb(36,36,36);
font: normal 100% Arial, Verdana, sans-serif;
}
#header {
background: rgb(16,16,16);
border-top: 3px solid rgb(32,32,32);
border-bottom: 1px solid rgb(32,32,32);
z-index: 100;
}
.container {
width: 960px;
margin: 0 auto;
position: relative;
}
.menu-container {
display: table;
margin: 0 auto;
}
#header ul {
padding: 0;
margin: 0;
list-style: none;
background: rgb(16,16,16);
}
#header ul li {
height: auto;
text-align: center;
width: 130px;
}
#menu {
overflow: auto;
z-index: 100;
width: 665px;
margin: 0 auto;
}
#menu a {
display: block;
padding: 20px;
font-size: 18px;
text-align: center;
font-family: sans-serif;
text-transform: uppercase;
text-decoration: none;
color: WhiteSmoke;
border-right: 1px solid #1d1d1d;
}
#menu a:hover {
color: white;
background: rgb(50,50,50);
}
#menu > li {
float: left;
}
#menu > li.active {
background: rgb(50,50,50);
}
#menu li:nth-child(1) {
border-left: 1px solid rgb(32,32,32);
}
#menu li:hover > ul {
display: block;
}
#menu li ul {
display: none;
z-index: 100;
width: auto;
position: absolute;
}
#menu li ul a {
padding: 10px 0;
}
#menu li ul li {
border-left: 1px solid rgb(32,32,32);
border-bottom: 1px solid rgb(32,32,32);
font-size: .8em;
}
#menu li ul li:nth-child(1) {
border-top: 1px solid rgb(32,32,32);
}
.wrapper {
width: 100%;
min-height: 500px;
overflow: auto;
background: rgb(36,36,36);
border-top: 1px solid rgb(55,55,55);
}
最佳答案
我在您的样式之上应用了这些样式,它们似乎达到了您的要求。 (非固定宽度的顶部菜单,其中第二层缩放到它上面的宽度)。
.menu-container { }
.menu-container #menu { width: auto; overflow: visible; height: 60px; }
.menu-container #menu li { position: relative; display: block; width: auto; }
.menu-container #menu li ul { display: none; width: 100%; }
.menu-container #menu li:hover ul { display: block; }
.menu-container #menu li ul li { display: block; width: 100%; }
关于html - 水平菜单栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24541131/