Html 锚定背景颜色更改

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

保险商实验室{
列表样式：无；
字体系列：无衬线；
字体大小：300；
保证金：0；
填充：0；
盒影：0px 6px 15px#8888888；
字体系列：影响；
字体大小：25px；
}
李国荣先生{
文本转换：大写；
文本对齐：居中；
显示：内联块；
背景色：#3A97FF；
宽度：25%；
保证金：0；
填充：40px0；
颜色：#fff；
}
李海军：第n个孩子（偶数）{
背景色：#1A77FF；
}
a{
显示：块；
文字装饰：无；
颜色：#fff；
溢出：自动；
}
a:悬停{
背景:#292A29；
}

从

li

元素中移除填充，并将其添加到

a

元素中，同时

内联块

在内联元素之间添加间隙，使用

显示：块；浮动：改为左

。有关详细信息，请参见以下代码段：

ul{
列表样式：无；
字体系列：无衬线；
字体大小：300；
保证金：0；
填充：0；
盒影：0px 6px 15px#8888888；
字体系列：影响；
字体大小：25px；
}
李国荣先生{
文本转换：大写；
文本对齐：居中；
显示：块；
浮动：左；
背景色：#3A97FF；
宽度：25%；
保证金：0；
填充：0；
颜色：#fff；
}
李海军：第n个孩子（偶数）{
背景色：#1A77FF；
}
a{
显示：块；
文字装饰：无；
颜色：#fff；
溢出：自动；
填充：40px0；
}
a:悬停{
背景:#292A29；
}

我最初的想法是让enter

可以悬停-有什么原因不能有效吗？