CSS 导航栏悬停 - 背景更改

Question

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

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

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

悬停时如何让颜色填满导航栏的整个高度？

Answer 1

你的列表容器#nav ul li 有 margin:margin: 20px; 不会改变任何颜色......我会用 padding 代替......

看片段

#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>