今天和群里的一位仁兄讨论了很久的菜单问题,原因是他想不用javascript，直接用css做个菜单.
我听到这后，我就一直认为不可能啊。怎么只用css就能实现菜单呢。我一般都是javascript+css来做菜单的.
弄了好久，争辩了好久，他给了我一个经典菜单代码，看了后发现hover还有这种用法,由于我当时IE是6.0,具体效果我没看出来,只是看了代码.
后来在网上搜了下hover,看到了蓝色理想中的一篇文章,作者为blank，2007年2月发表的,看来我确实是有很多地方没有学到位啊!.
文章写的很好,先总结下要主意的地方:
1.在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。
2.在CSS2中此伪类可以应用于任何对象。
3.a:hover 中加入除了text-decoration，color，z-index的其他属性消除hover的BUG
在看完这篇文章后,我也尝试做了个纯css菜单.如图.
鼠标移上后:
终于我也学会纯CSS实现菜单.
测试页面: www.alwaysthere.com.cn/test/csscd/cd1.html
整个页面的代码如下:
<html>
<head>
<title>纯CSS菜单</title>
<style>
ul {list-style:none}
li.first {width:100px;height:10px;backgroud:#999;float:left;}
li {height:10px; width:100px; background:#999; font-size:12px; }
li a {display:block; height:10px; width:100px; position:relative; color:#fff; text-decoration:none;}
li a:hover {background:#963963;}
li span {display:none;}
li a:hover span{display:block; width:100px; height:10px; background:#c00; position:absolute; top:15px; left:0px; color:#fff;}
li a:hover span.s2 {display:block; width:100px; height:10px; background:#c00; position:absolute; top:30px; left:0px; color:#fff;}
</style>
</head>
<body>
<ul>
<li class="first"><a href="#" title="">菜单A<span>菜单A1</span></a></li>
<li class="first"><a href="#" title="">菜单B<span>菜单B1</span><span class="s2">菜单B2</span></a></li>
</ul>
</body>
</html>
希望以后能在与大家探讨!.
