全兼容的纯CSS级联菜单要点浅析
作者：14px 来源：蓝色理想 发布时间：2009-06-10 14:42:00
标签：兼容,css,级联,菜单
参与测试的浏览器：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％;啊，一定要记得啊，一定要记得啊，一定要记得啊。
最后完成效果：
运行代码框
0
投稿猜你喜欢
- 本文实例讲述了python中xrange用法。分享给大家供大家参考。具体如下：先来看如下示例：>>> x=xrange(0
前言thinkphp3.1.2 需要使用cli方法运行脚本折腾了一天才搞定3.1.2的版本真的很古老解决增加cli.php入口文件defin- python删除某个目录文件夹及文件的方法：#!/usr/bin/env pythonimport osimport shutildelLi
- 本文实例讲述了python自动翻译实现方法。分享给大家供大家参考，具体如下：以前学过python的基础，一般也没用过。后来有一个参数表需要中
- 本文研究的主要是Python多线程threading和multiprocessing模块的相关内容，具体介绍如下。线程是一个进程的实体，是由
- 描述Fashion Mnist 是一个类似于 Mnist 的图像数据集. 涵盖 10 种类别的 7 万 (6 万训练集 + 1 万测试集)
- 前言现在Python3 被越来越多的开发者所接受，同时让人尴尬的是很多遗留的老系统依旧运行在 Python2 的环境中，因此有时你不得不同时
- 本文实例为大家分享了用matplotlib中scatter方法画散点图的具体代码，供大家参考，具体内容如下1、最简单的绘制方式绘制散点图是数
- 昨天下班后忽然兴起想写一个爬虫抓抓网页上的东西。花了一个钟简单学习了python的基础语法，然后参照网上的例子自己写了个爬虫。python数
- 假设你想找到本书中的某一个句子。你可以一页一页地逐页搜索，但这会花很多时间。而通过使用本书的索引，你可以很快地找到你要搜索的主题。表的索引与
- 一、说明自己一是想跟上潮流二是习惯于直接干三是没有人可以请教，由于这三点经常搞得要死要活。之前只简单看过没写过Diango，没看过Djang
- 都知道django每次请求都会连接数据库和释放数据库连接。Django为每个请求使用新的数据库连接。一开始这个方法行得通。然而随着服务器上的
- 如何限制上传文件的大小？要限制上传大小，只需如下设置一个属性即可： &
- 原文地址：30 Days of Mootools 1.2 Tutorials - Day 4 - Functions函数和MooTools
- 一，未使用 git add 缓存代码时。可以使用 git checkout -- filepathname (比如： git checkou
- 写这个文章绝对是偶然的偶然的机会，前年等一回的 元旦节，和 老婆上街 溜达，猛然想起买上一张福利彩票，结果屁都没有中上，开春第一
- 第1章 新建工程和创建app新建工程和创建app就不用贴出来了，我这里是测试图片上传的功能能否实现，所以项目都是新的，正常在以有的app下就
- 前言：大家都知道python项目中需要导入各种包（这里的包引鉴于java中的），官话来讲就是Module。而什么又是Module呢，通俗来讲
- Django的View一个视图函数（类），简称视图，是一个简单的Python 函数（类），它接受Web请求并且返回Web响应。响应可以是一张
- 一、介绍Python远程调试，即在远程机器上运行python代码在本地进行调试，之前文章里的方式方法已经out，现在更新为当前版本已经成功实
