我有这个菜单，我希望菜单项自动具有相同的大小，具体取决于菜单项的数量和nav宽度。
但是我很难以一种尽可能干净的方式完成这项工作。
这就是我构建菜单的方式
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Item 1</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
如果 jQuery 是一个选项，您可以使用它：
$('nav ul > li').css('width',($('nav').width()/$('nav ul > li').size()) +'px');
在这里小提琴：http: //jsfiddle.net/jAptc/6/
从第一个孩子(ul>li:first-child) 中删除填充并添加以下 jQuery 代码。
$(document).ready(function(){
var perc = 100 /$('nav>ul>li').length;
$('nav>ul>li').css("width",perc+"%");
});
基本上我正在做 ghego1 的代码中实现的相同逻辑，除了这是在 jQuery 中
可以这样用吗：
<ul class="nav">
<li>
<a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
<li>
<a href="#">Menu 2</a>
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
<li>
<a href="#">Menu 3</a>
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
</ul>
* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */