html - anchor 背景颜色变化

所以我有一个导航条，稍后我会从屏幕上方下拉。
我希望整个列表项从蓝色变为灰色。我把显示器设置为块，设法使宽度正确。但身高让我有问题。身高：100%不行。仅当显示不是块时，将顶部和底部填充设置为与列表项相同。不是它只是让按钮更大。

<style>
ul {
    list-style:none;
    font-family:sans-serif;
    font-weight:300;
    margin:0;
    padding:0;
    box-shadow: 0px 6px 15px #888888;
    font-family:impact;
    font-size:25px;
}
.nav li {
    text-transform:uppercase;
    text-align:center;
    display:inline-block;
    background-color:#3A97FF;
    width:25%;
    margin:0;
    padding:40px 0;
    color:#fff;
}
nav li:nth-child(even) {
    background-color:#1A77FF;
}

a {
    display:block;
    text-decoration:none;
    color:#fff;
    overflow:auto;
}
a:hover {
    background:#292A29;
}
</style>
<nav>
  <ul class="nav">
    <li><a href="../Portfolio/About.html">About</a></li
    ><li><a href="../Portfolio/Contact.html">Contact</a></li
    ><li><a href="../Portfolio/Support.html">Support</a></li
    ><li><a href="../Portfolio/Work.html">Work</a></li>
  </ul>
</nav>

最佳答案

移除li元素中的填充并将其添加到a元素中，同时在内联元素之间添加间隙，改用inline-block。有关详细信息，请参阅以下代码段：

ul {
  list-style: none;
  font-family: sans-serif;
  font-weight: 300;
  margin: 0;
  padding: 0;
  box-shadow: 0px 6px 15px #888888;
  font-family: impact;
  font-size: 25px;
}

.nav li {
  text-transform: uppercase;
  text-align: center;
  display: block;
  float: left;
  background-color: #3A97FF;
  width: 25%;
  margin: 0;
  padding: 0;
  color: #fff;
}

nav li:nth-child(even) {
  background-color: #1A77FF;
}

a {
  display: block;
  text-decoration: none;
  color: #fff;
  overflow: auto;
  padding: 40px 0;
}

a:hover {
  background: #292A29;
}

<nav>
  <ul class="nav">
    <li><a href="../Portfolio/About.html">About</a>
    </li>
    <li><a href="../Portfolio/Contact.html">Contact</a>
    </li>
    <li><a href="../Portfolio/Support.html">Support</a>
    </li>
    <li><a href="../Portfolio/Work.html">Work</a>
    </li>
  </ul>
</nav>