全兼容的纯CSS级联菜单要点浅析
作者：14px 来源：蓝色理想 时间：2009-06-10 14:42:00
参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2
操作系统：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％;啊，一定要记得啊，一定要记得啊，一定要记得啊。
最后完成效果：
运行代码框
标签：兼容,css,级联,菜单
0
投稿猜你喜欢
在keras中获取某一层上的feature map实例
2023-10-19 11:37:24
Linux系统中MySQL的常用操作命令
2024-01-18 22:00:10
Python NumPy随机抽模块介绍及方法
2021-04-21 16:47:03
Django添加bootstrap框架时无法加载静态文件的解决方式
2023-04-16 07:27:44
在cmder下安装ipython以及环境的搭建
2023-01-11 03:27:37
mysql实现多表关联统计(子查询统计)示例
2024-01-19 18:53:26
python开发之文件操作用法实例
2022-08-07 02:03:45
Perl与JS的对比分析(数组、哈希)
2022-08-31 05:45:20
利用Matlab绘制各类特殊图形的实例代码
2021-01-05 21:10:31
ASP制作中使用MYSQL的分析
2008-10-13 09:25:00
tensorflow mnist 数据加载实现并画图效果
2023-10-20 15:07:33
Python使用struct处理二进制(pack和unpack用法)
2022-12-23 08:27:56
算法系列15天速成 第九天 队列
2022-06-29 14:16:43
asp如何做一个分页程序？
2010-07-11 21:13:00
element-ui表格列金额显示两位小数的方法
2024-04-26 17:41:10
Web2.0视觉风格进化论 之二
2007-11-03 20:10:00
浅析node命令行交互原理
2024-05-11 10:14:36
MYSQL存储过程即常用逻辑知识点总结
2024-01-21 07:36:36
两种oracle创建字段自增长的实现方式
2024-01-15 09:47:44
Django应用程序入口WSGIHandler源码解析
2021-07-09 04:33:22