位置：GZ医疗队 > 公益纪实 > 公益站长 > 网络技术 >
全兼容的纯CSS级联菜单要点浅析
来源： 作者： 点击:125次 时间：2009-10-02
参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2
操作系统：Windows
蓝色理想经典论坛首发，转载请注明出处
这次给项目做的级联菜单使用了纯CSS的方式，霍霍，能用CSS做的，就用CSS完成吧。
早已有前辈完成过这样的实例了，我以为我能顺利完成，但没想到处处碰壁，故记录一点心得如下，供大家参阅。
废话不多说，咚咚咚，开始制作啦！
除了IE6这个坚强的孩子，其他浏览器攻克还是比较容易的。
操作系统：Windows
蓝色理想经典论坛首发，转载请注明出处
这次给项目做的级联菜单使用了纯CSS的方式，霍霍，能用CSS做的，就用CSS完成吧。
早已有前辈完成过这样的实例了，我以为我能顺利完成，但没想到处处碰壁，故记录一点心得如下，供大家参阅。
废话不多说，咚咚咚，开始制作啦！
除了IE6这个坚强的孩子，其他浏览器攻克还是比较容易的。
该实例完成大概就两个要点：
- 忌浮忌躁，一步步来，先把最低级的display:none;做。
- “: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%;啊，一定要记得啊，一定要记得啊，一定要记得啊。
上一篇：如何设计海报 下一篇：一位软件工程师的7年总结
