效果如下图： 要实现这个效果。很简单。 定义CSS样式：

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

a {text-decoration:none; color:#000000; font-size:14px;}   初始状态 a:hover {text-decoration:none;color:#ff0000; font-size:14px}   激发状态 分析: text-decoration:none  没有下划线. color   字体颜色. font-size  字体大小（可用px.pt 等单位表示） background-color 字体的背影颜色。  

结果：

a:hover {   background:#FFFFFF;   text-decoration:none;   color:#0066FF;   display:block; }