css - 完整的 block 没有出现在导航栏中？

Question

我写了下面的代码来制作一个导航栏跟随demo .

<ul id="nav">
<li><a href="#">home</a></li>
 <li><a href="#">home</a></li>
 <li><a href="#">home</a></li>
 <li><a href="#">home</a></li>

</ul>
#nav li
{
float:left;
margin-right:13px;
margin-top:25px;
border-left:1px dashed gray;
}
#nav a
{
display:block;
margin:20px 10px;
}
#nav a:hover
{
color:red;
}

在 block 上悬停完全红色时没有显示我想要这样的东西

但是红色只是显示在链接上而不是完整的 block 上。在我的代码中帮助我。

Answer 1

#nav a:hover
{
color:red;
}

color 属性用于指定文本 颜色。只有文本颜色发生变化的原因是因为这就是您所要求的。如果要改变背景颜色，需要指定background-color:

#nav a:hover
{
  background-color:red;
}