导航栏中没有完整的块？

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;
}

悬停在块上的完整红色没有显示我想要这样的东西

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

Answer 1

#nav a:hover
{
color:red;
}

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

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