首页 >web前端 >html教程 >css div ul li 导航栏(横向):(纯CSS 多级菜单IE6能支持的)_html/css_WEB-ITnose

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

WBOY
WBOY原创
2016-06-24 12:31:421808浏览

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

纯CSS多级菜单by 司徒正美

纯CSS多级菜单 by 司徒正美

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn