不用JS实现漂亮导航菜单效果－简单实用

今天回家稍微早了点（19:30…~_~!!）,小站也好几天没有更新原创文章了，是得写点什么了。想起刚开始做本站主题的顶部导航菜单也折腾了半天时间，有必要和各位分享下经验,不用JS也能实现漂亮导航菜单效果。
大家都知道，在CSS中有个四个很好用的伪类:link,visited,hover,active分别代表链接默认样式，访问过样式，鼠标经过时样式和鼠标单击时样式。利用这四个伪类，可以做出很多炫丽的页面效果。顺便提一下，在CSS中书写这四个伪类时要按顺序来写，顺序为上面所示，不然会出现一些意料之外的错误效果，按首字母依次是L-V-H-A。dream就曾经在这方面吃过亏，浪费了很多时间。

好了，转入正题，说下当时的情况。兴冲冲地写下：

<style>
<!–
.nav_menu{
background-image: url(images/mm_bg.gif);
background-repeat: repeat-x;
}
.nav_menu a:hover{
background-image: url(images/mm_selected.gif);
background-repeat: repeat-x;
}
–>
</style>
<table>
<tr>
<td><a href=”#1″ class=”nav_menu”>盒子ui首页</a></td>
<td><a href=”#1″ class=”nav_menu”>设计</a></td>
<td><a href=”#1 “class=”nav_menu”>转载</a></td>
</tr>
</table>

在IE7下浏览，基本达到效果了，但还要改进一下，我希望鼠标在经过td时触发hover事件，这样菜单的可触发面积会大一点，效果也相应的好些。ＯＫ，那就把TD代码部分改成：

<td class=”nav_menu”> <a href=”#1″>盒子ui首页</a></td>

…
继续IE7下浏览，完美，自己先臭美一下，嘿嘿。顺便发给朋友看下，这才发现问题，在IE6下伪类hover完全失效。查了一番资料才知，原来上文提到的四个伪类在IE下只支持在<a>标签中使用，什么玩意哦。本想着用JS来解决，但为一个小小的页面效果动用JS有点得不偿失，所以还是从css着手。又查阅了css的资料，终于找到办法，可以用<li>标签来实现。
首先，<li>标签默认是按列排序的，如何让它按行排序呢（即横向排序），这个好解决，只要在它的外层加上<ul>并将其的list-style属性改成none就行了。

<!–
.nav_menu{
background-image: url(images/mm_bg.gif);
background-repeat: repeat-x;
}
.nav_menu ul{
list-style:none;
line-height: 2.0em;
padding: 0px;
margin: 0px;
}
.nav_menu li{
float:left;
width:100px;
}
.nav_menu a:hover{
background: url(images/mm_selected.gif);
color:#FFF;
text-decoration: none;
height: 36px;
width: 100px;
}
<div class=”nav_menu”>
<ul>
<li><a href=”#1″>盒子ui首页</a></li>
<li><a href=”#1″>设计</a></li>
<li><a href=”#1″>转载</a></li>
</ul>
</div>

在IE6浏览，hover是生效了，不过背景图片mm_selected.gif只显示不完整，只显示了文字宽度大小的区域出来，有什么办法可以解决呢？当然有，把
<div><a>标签设置成区块显示就行了，即display属性设置成block;完整代码如下：

<style>
.nav_menu{
background-image: url(images/mm_bg.gif);
background-repeat: repeat-x;
}
.nav_menu ul{
list-style:none;
line-height: 2.0em;
padding: 0px;
margin: 0px;
}
.nav_menu li{
float:left;
width:100px;
}
.nav_menu a{
display:block;
text-align:center;
height:36px;
}
.nav_menu a:hover{
background: url(images/mm_selected.gif);
color:#FFF;
text-decoration: none;
height: 36px;
width: 100px;
}
</style>
<div class=”nav_menu”>
<ul>
<li><a href=”#1″>盒子ui首页</a></li>
<li><a href=”#1″>设计</a></li>
<li><a href=”#1″>转载</a></li>
</ul>
</div>

上面只是简单的效果应用，你可以根据你的需要加上其它的伪类，扩展出很多炫丽的效果。

总结一下几个要点：
1，伪类hover在IE6下只支持用在<a>标签中。
2，li标签横向排列，只需在它的外层再嵌套一个标签，并设置其list_style属性为none就行了。
3，将<a>标签的display属性设置成block，可以将伪类hover的作用域放大到整个标签，其长宽大小等于<a>标签的大小;
4，ie6很邪恶。。。