锚点背景颜色变化

Question

所以我有一个导航栏，我稍后会从屏幕上方下拉。我希望整个列表项从蓝色变为灰色。我设法通过将显示设置为块来获得正确的宽度。但是高度给我带来了问题。 height: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>

Answer 1

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

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>

锚点背景颜色变化

Anchor background color change

html

css

anchor

hover

background-color