a:hover{     background:#f29901; }

只需要再加上一句 a:hover{     background:#f29901;     display:block; } 即可如效果图所示，当鼠标移动到超链接上的时候，整个li元素背景变色。 可是这样还有一个问题，鼠标必须移动到文字上面才能触发a:hover效果。 如果想要鼠标移动到元素li上的时候，就触发a:hover效果。可以这样写 a {     width:130px;       /*li元素的宽度，也就是相当于定义了一个宽度范围，当鼠标移动到上面的范围的时候就触发a:hover效果*/ } a:hover{     background:#f29901;     display:block; } 下面附上完整例子代码： html代码：      导航菜单1         导航菜单2         导航菜单3         导航菜单4         导航菜单5         导航菜单6 css代码： #content{} #content li{  line-height:30px;  text-align:center;  color:#fff;  display:block;  background:#333;  width:100px; } #content li a{  display:block;  float:right;  background:#333;  width:100px;  color:#fff;  text-decoration:none; } #content li a:hover{  color:#000;  background:#fff; }