CSS导航栏悬停 - 背景变化答案

【问题标题】：CSS Navigation Bar Hover - Background ChangeCSS导航栏悬停 - 背景变化
【发布时间】：2016-10-15 21:58:53
【问题描述】：

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

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

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

【问题讨论】：

标签： css navigation hover

【解决方案1】：

您的列表容器#nav ul li 有 margin:margin: 20px; 不会发生任何颜色变化...我会用填充代替...

见sn-p

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

【讨论】：