水平菜鸟

Question

我有一个水平菜单栏，并且子菜单有问题。我希望子菜单与其标题具有相同的宽度（顶部的li？）。

Fiddle

我知道解决问题的一种方法，给顶部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);
}

Answer 1

我在你的风格之上应用了这些风格，他们似乎做了你想要的。 （非固定宽度的顶层菜单，其中第二层缩放到它上面的东西的宽度）。

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

Answer 2

以下是修改过代码的小提琴：http://jsfiddle.net/3zj6E/1/。

以下CSS规则集已更改：

#menu {
    overflow: auto;
    z-index: 100;
    display: table;
    margin: 0 auto;
}

#menu > li {
    float: left;
    position: relative;
}

#menu li ul {
    display: none;
    z-index: 100;
    position: absolute;
    width: 100%;
}