将悬停背景颜色替换为整个块的问题

Question

我正在创建一个导航栏，我遇到的问题是让悬停的背景颜色取代我想要它的整个区域。我希望它是列表项的整个块以及我创建的填充。现在它只是改变了链接标题名称的颜色。

我创造了一个小提琴来展示正在发生的事情。

https://jsfiddle.net/aqdw7mh3/

我尝试将width: 100%;添加到：

.spectator_nav li:hover ul {
display: block;
}

和

.spectator_nav li a:hover {
background-color: #282828;
-o-transition:color .4s ease-out, background .3s ease-in;
-ms-transition:color .4s ease-out, background .3s ease-in;
-moz-transition:color .4s ease-out, background .3s ease-in;
-webkit-transition:color .4s ease-out, background .3s ease-in;
/* ...and now for the proper property */
transition:color .4s ease-out, background .3s ease-in;
}

这对我的案子没有任何帮助。我错过了什么？

Answer 1

将a设置为块的大小。这样，它将填满块，背景也将填满。

删除/更改了一些内容，但希望这就是您之后的内容：https://jsfiddle.net/aqdw7mh3/4/