网页导航栏鼠标放上去变色。但为什么变色的背景色不是整个li。而只是<a>的区域。求帮忙
li
  {
  list-style: none;
  margin: 0px;
  padding: 0px;
  float: left;
  height: 40px;
  line-height: 40px;
  font-size: 1.2em;
  width: 100px;
  text-align: center;
  background-color: Lime;
  }
  a
  {
  color: #474747;
  text-decoration: none;
  }
  li a:hover
  {
  color: #0000FF;
  background-color: Aqua;
  }

<div style="width: 700px; height: 40px; padding: 0;">
  <ul>
  <li><a href="Index.aspx">首页</a></li>
  <li><a href="Job.aspx">人才招聘</a></li>
  <li><a href="Interact.aspx">公众参与</a></li>
  </ul>
  </div>

------解决方案--------------------
li a:hover
{
color: #0000FF;
background-color: Aqua;
}

这个css就是在<li>中的<a>标签，当鼠标悬浮时，改变<a>中的背景色。
如果想改变整个<li>的背景色，可用类似<li onmousemove="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor=''"><a href="">dddddddddddddd</a></li>
来控制。
------解决方案--------------------
因为a标签占的区域不是整个li标签区域，那你的CSS是指上a标签变色。要把a标签高度和宽度设置跟li标签一样，然后display：block。就可以了。