如何制作css jquery自动导航？

Question

我想制作一个自动适合网站宽度的导航。我的菜单是动态的，所以如果添加菜单，菜单之间的差距应该压缩并适合网站的宽度。如何使用jquery和css。

我的HTML是这样的：

<div class="menu">
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact Us</a></li>
         </ul>
        </div>

和css是：

.menu{
height:auto;
width:400px;
}

.menu ul{ width: 100%; list-style:none;}
.menu ul li{ list-style:none;}
.menu ul li a{ float:left; padding:10px 20px;
background-color:#cccccc;}
.menu ul li a:hover{ background-color:#eeeeee;}

如果我添加菜单，菜单将会关闭。所以我希望如果我可以使填充动态，以便它会收缩，如果我添加新项目。

Answer 1

在顶级菜单元素上使用百分比宽度。