CSS导航栏悬停 - 背景变化

Question

当我创建导航栏时，我想让它的字段在悬停时改变颜色。但是，颜色似乎不会填满导航栏的整个高度。这是我的代码：

＆＃13;

＆＃13;

#nav {
height: 80px;
width: 100%;
background-color: black;
}

#nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

#nav ul li {
float:left;
margin: 20px;
}

#nav ul li a {
text-decoration:none;
line-height:40px; 
color: gray;
font-weight: bold;
font-size: 25px;
display: block;
}

#nav ul li a:hover { 
color: black;
background-color: gray;
}

＆＃13;

<div id="nav">
			 <ul>
			 	 <li><a href="#">Home</a></li>
			 	 <li><a href="#">About</a></li>
				 <li><a href="#">Contact Us</a></li>
				 <li><a href="#">Log In</a></li>
			 </ul>
		</div>

＆＃13;

＆＃13;

＆＃13;

如何在悬停时使颜色填充导航栏的整个高度？

Answer 1

您的列表容器#nav ul li有margin:margin: 20px;，不会有任何颜色变化......我会选择填充...

请参阅代码段

#nav {
  height: 80px;
  width: 100%;
  background-color: black;
}
#nav ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
#nav ul li {
  float: left;
  padding: 20px;
}
#nav ul li a {
  text-decoration: none;
  line-height: 40px;
  color: gray;
  font-weight: bold;
  font-size: 25px;
  display: block;
}
#nav ul li:hover {
  color: green;
  background-color: gray;
}
#nav ul li a:hover {
  color: black;
}

<div id="nav">
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Contact Us</a>
    </li>
    <li><a href="#">Log In</a>
    </li>
  </ul>
</div>