Html 菜单得到全宽。列表项共享相同的宽度以获得全宽

我有一个水平菜单，我希望它得到我的网站的全宽，但有些事情是不对的。我的菜单现在看起来像这样，下面是代码：

<nav>
  <ul id="menu" class="menu">
    <li> <a href="#" > <span class="link"> <span class="link"> HOME </span>  </span> </a> </li>
    <li> <a href="#" > <span class="link"><span class="link"> ABOUT </span>  </span> </a> </li>
    <li> <a href="#" >  <span class="link"> <span class="link">FAQ</span>  </span> </a> </li>
    <li> <a href="#" > <span class="link"> <span class="link">CARS</span>  </span> </a> </li>
    <li> <a href="#" > <span class="link"> <span class="link">CONTACT</span>  </span> </a> </li>
  </ul>
</nav>

ul.menu {
    margin:0;
    padding:0;
    list-style: none;
    font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    font-size:14px;
    width:auto;
    margin-left:320px;
    top:30%;
    right:0%;
}
ul.menu a {
    text-decoration:none;
    outline:none;
    padding-top:30px;
}
ul.menu li {
    float:left;
    width:175px;
    height:85px;
    position:relative;
    cursor:pointer;
}
ul.menu li > a {
    position:absolute;
    top:0px;
    left:0px;
    width:175px;
    height:60px;
    z-index:12;
    background:transparent url(images/overlay.png) no-repeat bottom right;
    background-color: rgba(0, 0, 0, 0.75);
    -moz-box-shadow:0px 0px 2px #000 inset;
    -webkit-box-shadow:0px 0px 2px #000 inset;
    box-shadow:0px 0px 2px #000 inset;
}

菜单{
保证金：0；
填充：0；
列表样式：无；
字体系列：“Myriad Pro”，“投石机MS”，无衬线；
字体大小：14px；
宽度：自动；
左边距：320px；
最高：30%；
右：0%；
}
菜单a{
文字装饰：无；
大纲：无；
填充顶部：30px；
}
菜单李{
浮动：左；
宽度：175px；
高度：85px；
位置：相对位置；
光标：指针；
}
菜单li>a{
位置：绝对位置；
顶部：0px；
左：0px；
宽度：175px；
高度：60px；
z指数：12；
背景：透明url（images/overlay.png）右下角不重复；
背景色：rgba（0,0,0,0.75）；
-moz盒阴影：0px 0px 2px#000插图；
-网络工具包盒阴影：0px 0px 2px#000插图；
盒影：0px 0px 2px#000插图；
}

所以，我现在想让这个菜单获得网站的全宽，让每个列表项平均共享全宽，这样每个框都会以相同的长度拉伸，以获得网站的全宽。到目前为止，我试着在宽度、位置和显示上下功夫，但都没用。我将ul.menu li的宽度设置为100%，得到的结果是

通过将ul.menu li>a的宽度设置为100%，我得到了这个结果

---

有什么想法吗？

您只需将

li

的宽度设置为20%，因为您有5个项目和

100% / 5 = 20%

---

更新以下两个类，如下所示

而不是这个

ul.menu li {
float:left;
width:175px;
height:85px;
position:relative;
cursor:pointer;
 }
 ul.menu li > a {
position:absolute;
top:0px;
left:0px;
width:175px;
height:60px;
z-index:12;
background:transparent url(images/overlay.png) no-repeat bottom right;
background-color: rgba(0, 0, 0, 0.75);
-moz-box-shadow:0px 0px 2px #000 inset;
-webkit-box-shadow:0px 0px 2px #000 inset;
box-shadow:0px 0px 2px #000 inset;
 }

用这个

ul.menu li {
float:left;
width:20%;
height:85px;
position:relative;
cursor:pointer;
 }
 ul.menu li > a {
position:absolute;
top:0px;
left:0px;
width:100%;
height:60px;
z-index:12;
background:transparent url(images/overlay.png) no-repeat bottom right;
background-color: rgba(0, 0, 0, 0.75);
-moz-box-shadow:0px 0px 2px #000 inset;
-webkit-box-shadow:0px 0px 2px #000 inset;
box-shadow:0px 0px 2px #000 inset;
 }