这里是简洁版，主要把[显示/隐藏]效果给剥离出来给大家研究。

主要是利用了a:hover[ie]，li:hover[非ie]的状态来做出显示/隐藏菜单的效果。

关键之处：

程序代码

<></a><>

这一段注释表示：只有非IE浏览器和IE7才能读取到</a>

这样在非IE浏览器及IE7版本的浏览器中读取到的html是：

程序代码

<li><ahref="#">导航</a>

<ul><li>二级导航</li></ul>

</li>

程序代码

<>

这一段注释代表：只有IE6以及IE6以下版本的浏览器才能读取到</a>

而在IE6以及IE6以下版本的浏览器中读取到的html就是：

程序代码

<li><ahref="#">导航

<ul><li>二级导航</li></ul>

</a>

</li>

有些朋友可能要问：为什么要搞的那么复杂，而不都用链接来包含二级列表呢，那样就只用写a:hover就可以了，代码简单多了。

我个人觉得：

玩标准就要尽可能的去遵循语义。

在IE6以及以下版本中由于不支持a以外标记的hover伪类，所以目前来说只有这个办法能达到类似的目的，对着IE6...只好放弃语义了。

但我们可不要为了一个IE6而坏了整锅汤哦，所以有些事情虽然麻烦了点，但还是要做的~

纯CSS菜单 首页

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

注意里面是分段的，[随意发挥]。俺先来发挥一下~（原先没注意兼容，现在兼容了...）

纯CSS菜单 首页

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]