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

Question

我有一个横向菜单，我想让它获得我的网站的全宽，但有些事情是不对的。我的菜单现在看起来像这样，以下是代码：

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

所以，我现在想让这个菜单获得网站的全宽，并使每个列表项共享全部宽度，这样每个框都会以相同的数量拉伸以获得网站的全部宽度。到目前为止我尝试的是宽度，位置，显示，但没有任何效果。我将ul.menu li的宽度设置为100％，我得到的是

并通过设置ul.menu li的宽度＆gt; a 100％我得到这个

有什么想法吗？

Answer 1

您只需要将li的宽度设置为20％，因为您有5个项目并且

100% / 5 = 20%

<强> DEMO

Answer 2

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

而不是这个

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