这是 CSS 菜单：
http://www.devinrolsen.com/wp-content/themes/dolsen/demos/css/infinite-sub-menu/
正如你所看到的，它完美的、深度嵌套的——但不是 100% 加宽的。这就是我想要 100% 拉伸的东西。如果有 4 个菜单项，其宽度必须为每个的 25%。这是我到目前为止所做的：
<ul>
<li>Menu item</li>
<li>
Expandable ↓
<ul>
<li>Menu</li>
<li>Menu item</li>
<li>Menu item long
<ul>
<li>Menu item long nested1</li>
<li>Menu item long nested2</li>
</ul>
</li>
</ul>
</li>
<li>E
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</li>
<li>
Expands
<ul>
<li>Hi.</li>
<li>Howdy</li>
</ul>
</li>
</ul>
Don't push me down...
ul {
display: table; /* Some CSS magic to make the menu... */
width: 100%; /* ...stretch to full width. */
table-layout: fixed; /* Making menu items equal width */
}
li {
display: table-cell; /* This comes together with ul{display:table} */
text-align: center;
}
li ul { display: none; } /* Hiding the submenus by default */
li:hover ul {
display: block; /* Show submenus on mouseover...*/
width: 100%;
position: relative; /* ...and make them appear below, not inside */
height:0px; /* Kind of a hack, but it's for a good reason (remove it to see why) */
}
li:hover ul li {
display: block; /* Make submenu items stack vertically */
width: 100%; /* 100% of parent container */
}
/* Coloring */
li:nth-child(even){
background-color: lightblue;
}
li:nth-child(odd){
background-color: lightskyblue;
}
可悲的是，它不能再有嵌套项了。（“菜单项 long nested2”不像第一个示例那样出现）。
有人可以帮帮我吗？