水平菜单栏

Question

我有一个水平菜单栏，并有子菜单问题。我希望子菜单的标题宽度相同（top 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

下面是修改代码的小提琴：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%; 
} 

Answer 2

我申请对您的样式上面这些款式，他们似乎都做了你想要的东西。 （非固定宽度的顶层菜单，其中第二层根据其上面的东西的宽度缩放）。

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