悬停链接不会完全显示背景

Question

当我悬停时，更改颜色的悬停背景仅适合链接周围，而不适合整个背景。尝试了一切，但无法使其工作，任何人都可以帮忙吗？

nav ul {
font-family: 'Indie Flower', cursive;
color: white;
text-align: center;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #3333FF;
-webkit-transition: max-height 0.4s;
-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;
}
nav ul li {
display: inline-block;
padding: 16px;
}
a:link {
text-decoration: none;
color: inherit;
}
a:visited {
color: white;
}
a:hover {
background-color: #0000EE;
}

<nav>
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Members</a></li>
<li><a href="# ">Contacts</a></li>
<li><a href="#">Policies</a></li>
<li><a href="#">Volunteer</a></li>
<li><a href="#">Useful links</a></li>
</ul>
</nav>

Answer 1

将a元素更改为display: inline-block;并将填充从li移动到a：

a {
display: inline-block;
padding: 16px;
}

例：

nav ul {
font-family: 'Indie Flower', cursive;
color: white;
text-align: center;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #3333FF;
transition: max-height 0.4s;
}
nav ul li, a {
display: inline-block;
}
a {
padding: 16px;
}
a:link {
text-decoration: none;
color: inherit;
}
a:visited {
color: white;
}
a:hover {
background-color: #0000EE;
}

<nav>
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Members</a></li>
<li><a href="# ">Contacts</a></li>
<li><a href="#">Policies</a></li>
<li><a href="#">Volunteer</a></li>
<li><a href="#">Useful links</a></li>
</ul>
</nav>

Answer 2

将悬停效果更改为 li 标签而不是标签

nav ul {
font-family: 'Indie Flower', cursive;
color: white;
text-align: center;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #3333FF;
-webkit-transition: max-height 0.4s;
-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;
}
nav ul li {
display: inline-block;
padding: 16px;
}
nav ul li:hover {
background-color: #0000EE;
}
a:link {
text-decoration: none;
color: inherit;
}
a:visited {
color: white;
}

<nav>
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Members</a></li>
<li><a href="# ">Contacts</a></li>
<li><a href="#">Policies</a></li>
<li><a href="#">Volunteer</a></li>
<li><a href="#">Useful links</a></li>
</ul>
</nav>