全兼容的纯CSS级联菜单制作要点浅析
5月 20th, 2009
[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]
这次给云南移动网上营业厅做的级联菜单使用了纯CSS的方式，霍霍，能用CSS做的，就用CSS完成吧。^-^
早已有前辈完成过这样的实例了，我以为我能顺利完成，但没想到处处碰壁，故记录一点心得如下，供大家参阅。
废话不多说，咚咚咚，开始制作啦！！！
除了IE6这个坚强的孩子，其他浏览器攻克还是比较容易的。
提示：你可以先修改部分代码再运行。
该实例完成大概就两个要点：
1. 忌浮忌躁，一步步来，先把最低级的display:none;掉。
2. “:hover伪类”的使用，默认状态“display:none;”，“:hover”时则“display:block;”则能很容易完成。
而IE6下折腾就比较复杂了，经过头破血流的教训之后，总结出关键四点：
1. 原理：IE6仅<a>标签支持:hover伪类，但如果a标签里面再嵌入a标签，里面的a标签将不会生效，所以必须在之间套加一层<table>；
- <!–[if IE 6]><a href="#nogo"><table><tr><td><![endif]–>
- 内容部分可以含有<a>标签
- <!–[if IE 6]></td></tr></table></a><![endif]–>
2. 关键样式名：这个用于:hover效果的a标签的命名，如果使用与<li>一致的样式名（在非IE6中是li:hover产生的效果），将不用再另写样式代码，不仅节省了代码开销，而且可维性更好；
- <li class="li">
- <!–[if IE 6]><a class="li" href="#nogo"><table><tr><td><![endif]–>
- 内容部分可以含有<a>标签
- <!–[if IE 6]></td></tr></table></a><![endif]–>
- </li>
3. visibility的使用：采用display的话将出现onmouseout时上一次显示的optionGroup仍然不消失的情况
- .c_subNav .li:hover ul { visibility:visible;}
4.table的设置：[含泪ing]table一定要记得width:100%;啊，一定要记得啊，一定要记得啊，一定要记得啊……
最后完成效果：
提示：你可以先修改部分代码再运行。
学习css,好想跟你学
所谓的折腾。。
给点更折腾的建议，怎样让图片不出来时显示三角呢？
原来要这样啊，之前一直没搞出来后来加JS解决了
“采用display的话将出现onmouseout时上一次显示的optionGroup仍然不消失的情况”
@aoao @_@ 你真是好人。。
table是个很纠结的标签… 因为不和block一样自己撑开,如果用width:100%父元素有padding的话….
求解…如何让table和block一样撑开捏…?
@bigCat 恩啊，太纠结了…如果可以直接display:block;多好 - -! 还有那一堆的表单元素，可是MS大爷不让。
不过貌似width:100%;和父元素的padding不抵触呢。
@chomo
大半夜跑回来回复…
#sugerDaddy {width:100px;padding:20px;}
#littleGirl {width:100%;}
[div id=sugerDaddy][div id=littleGirl][/div][/div]
偶意思是这样子…父容器有宽度写死加padding,那里面的百分百不就是父容器的宽度么….那不就撑开了….如果没记错的话…半夜了..zzz先
很好。
有个疑问，如果要将这个菜单做为后台的导航放在带有框架的布局的Left中，该如何实现？
因为LeftFrame 我们定义了
cols=”144″
这样展开后的菜单就无法显示了。
这个得用到div仿框架配合实现了。
版主 学习啦
@chomo
我在IE7下面测试：z-index:2;后面必须添加：background:transparent;才能解决这个问题。
不好意思，昨晚用了你的这个级联菜单，刚开始觉得已经很好了！不过用下来会发现一个问题，算是比较难发现的问题，就是在第一级菜单鼠标上下移动时，有时候会触发二级菜单的hover事件，发生几率和菜单的复杂度有关，菜单越长级联越多越容易出现这种情况！
还有就是用visibility属性的话，如果菜单太长，即使状态是hidden，惨淡也会占据自己原有的位置，使得原本并没有那么长的页面变得很长！