这部分最后给出的成品效果比较惊人，也就是传说中的纯css六级菜单。这个东西最厉害的地方是兼容所有主流浏览器（ie6，ie8，maxthon2.5，firefox3.5，opera10，safari4与chrome2），而一点css hack也没有用。毕竟css hack只是权宜之计，治标不治本，谁知它会对未来新版本的浏览器有什么副作用，因此能不用就不要用了。由于结构非常有规律，读者认真学习后，可以自行扩展为十级菜单。

纯CSS多级菜单

由于IE6能支持的伪类少得可怜，仅支持a元素的hover与visited与active。为了显示隐藏的二级菜单，我们必须把二级菜单的那个无序列表放到a元素下，但这样一来firefox那边又发难了。这时我们就要请出IE的条件注释，让页面在IE6下呈现一套结构层，在其他浏览器下呈现另一套。

01.

02.   

03.     

04.       菜单三

05.       

06.         

菜单三

07.         

菜单三

08.       

09.       

10.     

11.     

12.       菜单三

13.       

14.         

菜单三

15.         

菜单三

16.       

17.       

18.     

19.     

20.       //************略***********

21.     

22.     

23.       //************略***********

24.     

25.   

26.

* { margin:0; padding:0; } .menu { font-size:12px; } .menu li {/*水平菜单*/ float:left; list-style:none; position:relative;/*把包含块移动li元素*/ } .menu a { display:block; /*position:relative;发现放在a元素中， 在标准游览器中惨不忍睹， 和纯CSS相册3的第一个运行框在chrome中遇到的bug一样*/ height:32px; width:100px; line-height:32px; background:#a9ea00; color:#ff8040; text-decoration:none; text-align:center; } .menu a:hover { background:#369; color:#fff; } /*新增的二级菜单部分*/ .menu ul ul { visibility:hidden;/*开始时是隐藏的*/ position:absolute; left:0px; top:32px; } .menu ul li:hover ul,/*非IE6*/ .menu ul a:hover ul{/*IE6*/ visibility:visible; } .menu ul ul li { clear:both;/*垂直显示*/ text-align:left; } .menu ul li a strong{ color:aqua; }

纯CSS多级菜单 by 司徒正美

菜单三 菜单三 菜单三 菜单三 菜单三 菜单三 菜单三 菜单三 菜单三 菜单三 菜单三 菜单三