纯CSS无限级下拉菜单

前几天翻出以前写的一个纯CSS仿微软经典菜单，现在看来才感叹，微软的经典菜单确实很经典，至少看起来不觉得厌烦。

感叹归感叹，想想既然可以实现下拉菜单了，那么无限级下拉菜单理论上也是可以实现的，看了下之前的代码结构，马上肯定了这个理论。当然这完全归功于伟大的子选择符，形如：E>F，遗憾的是IE6并不支持子选择符，甚为郁闷，不过也不用放弃，可以换个解决方案。

一般来说无限级只是一种“存在状态”，但其实我们会用到的“并不会是无限”，而是有限的一定级数，比如说7级，8级，或更多一点，因为超出屏幕就没多少实际意义了，并且实际情况也比较少会出现那么深的层次关系。

无限级在非IE下是可以很简单就实现的，IE6也并非不能实现，只是稍微繁琐的，且不是“智能”的实现，而是通过“预设”，比如你预计最多只会出现6级的下拉菜单，那么预设10级应该就足够适应那些不确定因素了。所以前面我才会说无限级其实只是一种“存在状态”，我们所用到的并不会是无限的。

趁着一会的空闲，动手改造了一下原有的css样式文件。

@charset "utf-8";
html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,form,th,td{margin:0;padding:0;font-size:12px;}
body{margin:10px;font:12px/2 Verdana, Arial, Helvetica, Simsun, "Microsoft YaHei";}
table{border-collapse:collapse;border-spacing:0;}
li{list-style:none;}
a{text-decoration:none;cursor:pointer;}
.copyright{margin-top:50px;font-size:13px;text-align:center;}
#dymenu{width:100px;line-height:25px;}
#dymenu .root li{position:relative;border:1px solid #FFF;border-width:1px 1px 0 0;background:#EEE;}
#dymenu .root li li{border-width:1px 0 0 1px;}
#dymenu .root a{display:block;zoom:1;padding:0 10px;background:#EEE;color:#000;vertical-align:top;}
#dymenu .root h4{padding:0 10px;*padding:0;background:#EEE;*background:none;color:#000;font-weight:normal;cursor:pointer;}
#dymenu .root a:hover{background:#DDD;color:#333;}
#dymenu .root li:hover>h4{background:#DDD;color:#333;}
#dymenu .root ul,#dymenu a:hover a ul,#dymenu a:hover a:hover a ul,#dymenu a:hover a:hover a:hover a ul,#dymenu a:hover a:hover a:hover a:hover a ul,#dymenu a:hover a:hover a:hover a:hover a:hover a ul,#dymenu a:hover a:hover a:hover a:hover a:hover a:hover a ul,#dymenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover a ul,#dymenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover a ul,#dymenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover a ul{display:none;margin:-1px 0 0 0;_margin-top:0;background:#EEE;}
#dymenu a:hover ul,#dymenu a:hover a:hover ul,#dymenu a:hover a:hover a:hover ul,#dymenu a:hover a:hover a:hover a:hover ul,#dymenu a:hover a:hover a:hover a:hover a:hover ul,#dymenu a:hover a:hover a:hover a:hover a:hover a:hover ul,#dymenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover ul,#dymenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover ul,#dymenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover ul,#dymenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover ul{display:block;position:absolute;left:99px;top:0;width:100px;}
#dymenu .root li:hover>ul{display:block;position:absolute;left:99px;top:0;width:100px;margin-top:-1px;background:#EEE;}

来看实例：cssmenu.htm