css div ul li 导航栏(横向）：（纯CSS 多级菜单IE6能支持的）_html/css_WEB-ITnose

这部分最后给出的成品效果比较惊人，也就是传说中的纯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.         

  • 二级菜单_11

  07.         

  • 二级菜单_12

  08.       

  09.       

  10.     

11.     

• 12.       菜单二二

  13.       

  14.         

  • 二级菜单_11

  15.         

  • 二级菜单_12

  16.       

  17.       

  18.     

19.     

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

  21.     

22.     

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

  24.     

25.   

26.

纯CSS多级菜单 by 司徒正美

• 菜单一
  • 二级菜单_11
  • 二级菜单_12
• 菜单二
  • 二级菜单_11
  • 二级菜单_12
• 菜单三
  • 二级菜单_31
  • 二级菜单_32
• 菜单四
  • 二级菜单_41
  • 二级菜单_42