可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现
本来在chrome上用js写的好好的三级显隐菜单，放到ie6上一测试竟然奇葩般的会瞎闪。问题原因至今没参透，可能是我每次响应事件的处理代码过长？？总之我是对ie6幻灭了，去网上搜一搜能支持ie6的下拉菜单的实现，发现了这个网站的实现：
http://www.jb51.net/article/12964.htm（请猛点我）
实现得相当漂亮，没有用一行js代码，其主要思想是将二级菜单嵌入到上一级菜单项的dom对象中，并使用上一级菜单项的hover伪类来控制二级菜单的visibility属性。唯一美中不足的是这个实现只是一个二级菜单，我需要做一个三级的。试了一下与原实现类似的写法：
ul li:hover ul { visibility: visible }
但这样会有歧义，它区分不出是哪一级菜单项被悬停时应该显示其下面的哪一级菜单。于是冥思苦想怎么解决菜单定位歧义的问题，解决方案是，对每一级菜单都指定不同的class名称，这样可以直接定位到某一级菜单，不会产生歧义。html代码大体如下：
<ul class="l1-nav"> <!-- 第一级菜单 -->
<li class="l1-nav"> <!-- 第一级菜单项 -->
<ul class="l2-nav"> <!-- 第二级菜单 -->
<li class="l2-nav"> <!-- 第二级菜单项 -->
<ul class="l3-nav"> <!-- 第三级菜单 -->
<li class="l3-nav"></li> <!-- 第三级菜单项 -->
</ul>
</li>
</ul>
</li>
</ul>
而控制显示隐藏的代码如下：
li.l1-nav:hover ul.l2-nav, li.l2-nav:hover ul.l3-nav
{ visibility: visible }
不过对于ie6这个不听话的顽劣之徒来说，如果真的这么简单就太天真了。由于ie6只有a元素支持hover伪类，所以在ie中还要在li里包一个a元素。好在ie6中支持a元素里面包含其他元素，而不像其他浏览器里a元素不能包含其他元素（ie6奇葩之处不能胜数）。这样写出来的代码就有一些绕。而且还有一个针对ie6的hack是必须把每一个li项包含在一个定位为relative的table中，至于为什么由于没有删除一点点测还不得知，据猜测可能跟浮动定位有关。闲话不多说，上代码吧，css还是很简洁的，html就又臭又长还不好理解，谁让咱要考虑兼容性呢：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--定义过渡型DOCTYPE-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"><!--定义名字空间-->
<head> <title>网页布局+纯CSS三级鼠标悬停显示/隐藏菜单</title><!--标题栏-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><!--定义语言编码-->
<meta http-equiv="Content-Language" content="gb2312" /><!--针对老版浏览器定义语言编码-->
<meta content="all" name="robots" /><!--允许搜索机器人-->
<meta name="author" content="" /><!--作者信息-->
<meta name="Copyright" content=",共同探讨,允许转载" /><!--版权信息-->
<meta name="description" content="下拉菜单,CSS,布局" /><!--简介-->
<meta content="下拉,菜单,CSS,布局" name="keywords" /><!--关键词--> <style type=text/css>
* {
margin: 0;
padding: 0;
border: 0;
} html {
background: #bfc4c7; /*背景颜色*/
} body {
font: 12px/150% '宋体';
margin: 0 auto;
width: 770px;
text-align: center;
} /*menu部分*/ #menu {
margin: 0 auto; width: 770px !important;
clear: both
} #menu ul {
list-style: none;
} #menu table {
position: absolute;
left: 0;
top: 0;
} li.l1-nav {
float: left;
position: relative;
left: 0px;
top: 0px;
} a.l1-nav {
display: block;
text-align: center;
text-decoration: none;
width: 77px;
height: 30px;
line-height: 30px;
color: #000;
background: #c9c9a7;
} li.l1-nav:hover a.l1-nav, a.l1-nav:hover {
color: #fff;
background: #b3ab79;
} ul.l2-nav {
visibility: hidden;
position: absolute; /* 第二级菜单相对于第一级菜单绝对定位 */
left: 0px;
top: 30px;
} li.l2-nav {
float: left;
position: relative; /* 这里把第二级菜单项设成相对定位，以使得它包含的三级菜单相对它自己定位 */
left: 0px;
top: 0px;
} a.l2-nav {
display: block; /* 把a设成块级显示 */
text-align: center;
text-decoration: none;
width: 77px;
height: 30px;
line-height: 30px;
color: #000;
background: #faeec7;
} li.l2-nav:hover a.l2-nav, a.l2-nav:hover {
color: #fff;
background: #dfc184;
} ul.l3-nav {
visibility: hidden;
position: absolute;
left: 77px;
top: 0px;
} /* 这是控制菜单显示与隐藏的重点 */
a.l1-nav:hover ul.l2-nav, li.l1-nav:hover ul.l2-nav, a.l2-nav:hover ul.l3-nav, li.l2-nav:hover ul.l3-nav {
visibility: visible;
} a.l3-nav {
display: block;
width: 77px;
height: 30px;
line-height: 30px;
background: red;
color: #000;
text-decoration: none;
} a.l3-nav:hover {
background: blue;
color: #000;
} </style> </head> <body> <div id="menu">
<ul class="l1-nav"> <li class="l1-nav">
<!-- IE6里面a元素可以包含其他元素，且只有a能够支持hover伪类，但ul还要放在一个table中。而chrome中，a不可以包含其他元素，但li支持hover伪类。所以这一段有些绕。 -->
<a class="l1-nav" href="">第一分类
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul class="l2-nav"> <li class="l2-nav">
<a class="l2-nav" href="">XHTML
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul class="l3-nav">
<li><a class="l3-nav" href="">XHTML1</a></li>
<li><a class="l3-nav" href="">XHTML2</a></li>
<li><a class="l3-nav" href="">XHTML3</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li> <li class="l2-nav">
<a class="l2-nav" href="">CSS
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul class="l3-nav">
<li><a class="l3-nav" href="">CSS1</a></li>
<li><a class="l3-nav" href="">CSS2</a></li>
<li><a class="l3-nav" href="">CSS3</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li> <li class="l2-nav">
<a class="l2-nav" href="">PHP
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul class="l3-nav">
<li><a class="l3-nav" href="">PHP1</a></li>
<li><a class="l3-nav" href="">PHP2</a></li>
<li><a class="l3-nav" href="">PHP3</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li> <li class="l2-nav">
<a class="l2-nav" href="">MySQL
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul class="l3-nav">
<li><a class="l3-nav" href="">MySQL1</a></li>
<li><a class="l3-nav" href="">MySQL2</a></li>
<li><a class="l3-nav" href="">MySQL3</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li> <li class="l2-nav">
<a class="l2-nav" href="">Fireworks
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul class="l3-nav">
<li><a class="l3-nav" href="">Fireworks1</a></li>
<li><a class="l3-nav" href="">Fireworks2</a></li>
<li><a class="l3-nav" href="">Fireworks3</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li> <li class="l2-nav">
<a class="l2-nav" href="">Photoshop
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul class="l3-nav">
<li><a class="l3-nav" href="">Photoshop1</a></li>
<li><a class="l3-nav" href="">Photoshop2</a></li>
<li><a class="l3-nav" href="">Photoshop3</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li> <li class="l2-nav">
<a class="l2-nav" href="">Flash
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul class="l3-nav">
<li><a class="l3-nav" href="">Flash1</a></li>
<li><a class="l3-nav" href="">Flash2</a></li>
<li><a class="l3-nav" href="">Flash3</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li> </ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li> <li class="l1-nav">
<a class="l1-nav" href="">第一分类
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul class="l2-nav"> <li class="l2-nav">
<a class="l2-nav" href="">XHTML
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul class="l3-nav">
<li><a class="l3-nav" href="">XHTML1</a></li>
<li><a class="l3-nav" href="">XHTML2</a></li>
<li><a class="l3-nav" href="">XHTML3</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li> <li class="l2-nav">
<a class="l2-nav" href="">CSS
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul class="l3-nav">
<li><a class="l3-nav" href="">CSS1</a></li>
<li><a class="l3-nav" href="">CSS2</a></li>
<li><a class="l3-nav" href="">CSS3</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li> <li class="l2-nav">
<a class="l2-nav" href="">PHP
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul class="l3-nav">
<li><a class="l3-nav" href="">PHP1</a></li>
<li><a class="l3-nav" href="">PHP2</a></li>
<li><a class="l3-nav" href="">PHP3</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li> <li class="l2-nav">
<a class="l2-nav" href="">MySQL
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul class="l3-nav">
<li><a class="l3-nav" href="">MySQL1</a></li>
<li><a class="l3-nav" href="">MySQL2</a></li>
<li><a class="l3-nav" href="">MySQL3</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li> <li class="l2-nav">
<a class="l2-nav" href="">Fireworks
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul class="l3-nav">
<li><a class="l3-nav" href="">Fireworks1</a></li>
<li><a class="l3-nav" href="">Fireworks2</a></li>
<li><a class="l3-nav" href="">Fireworks3</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li> <li class="l2-nav">
<a class="l2-nav" href="">Photoshop
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul class="l3-nav">
<li><a class="l3-nav" href="">Photoshop1</a></li>
<li><a class="l3-nav" href="">Photoshop2</a></li>
<li><a class="l3-nav" href="">Photoshop3</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li> <li class="l2-nav">
<a class="l2-nav" href="">Flash
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul class="l3-nav">
<li><a class="l3-nav" href="">Flash1</a></li>
<li><a class="l3-nav" href="">Flash2</a></li>
<li><a class="l3-nav" href="">Flash3</a></li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li> </ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li> </ul>
</div> </body><!--网页主体结束-->
</html>
实现效果如下：
经虚拟机xp下亲测，非常流畅，一点不闪。有任何不甚严谨之处还敬请指教！
可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现的更多相关文章
- Selenium操作示例——鼠标悬停显示二级菜单，再点击二级菜单或下拉列表
这两天在玩python中selenium,遇到一个问题,就是鼠标移动到页面中某按钮或菜单,自动弹出二级菜单或下拉菜单,再自动点击其中的二级菜单或下拉列表. 首先,手工操作:打开母校的主页 http:/ ...
- [小技巧]兼容IE6的纯CSS背景半透明文字不透明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Html中鼠标悬停显示二级菜单的两种方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 兄弟连教育分享：用CSS实现鼠标悬停提示的方法
兄弟连教育分享:用CSS实现鼠标悬停提示的方法 本文,兄弟连HTML5培训,分享了纯CSS实现鼠标悬停提示的方法.给大家供大家参考.具体分析如下: 这是一款比较漂亮的鼠标悬停提示效果,用纯CSS代码实 ...
- 纯css实现鼠标感应弹出二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 不可思议的纯 CSS 实现鼠标跟随效果
直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...
- 纯CSS实现二级导航下拉菜单--css的简单应用
思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...
- 鼠标悬停显示CSS3动画边框
效果体验:http://keleyi.com/keleyi/phtml/css3/14.htm 以下是代码: <!DOCTYPE html> <html xmlns="ht ...
- EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码
EasyUI Datagrid 鼠标悬停显示单元格内容 ,halign:, align: 0 « 上一篇:LINQ to Entities 中的查询» 下一篇:去掉字符串中的非数字字符 posted ...
随机推荐
- Jmeter查看结果树
取样结果: Thread Name: test 1-2 线程名称:测试1 - 2Sample S ...
- stm32寄存器版学习笔记04 定时计数器中断
STM32共有8个定时计数器,其中TIME1和TIME8是高级定时器,TIME2~TIME5是通用定时器,TIME6和TIME7是基本定时器.以TIME3为例总结定时计数器的基本用法. 1.TIM3的 ...
- 关于swagger文档的使用方法
引言 最近在后台开发的时候,使用swagger2进行前后台接口文档的声明.由此遇见的一些问题,写下来给自己复习. 参考: https://blog.csdn.net/xupeng874395012/a ...
- php 中的 Output Control 函数
先看一个简单的例子 <?php ob_start(); echo 111; ob_clean(); echo 222; ob_start()开启ob缓存,然后111放进了ob缓存, 再调用ob_ ...
- 字符编码：ASCII，Unicode和UTF-8
字符编码是计算机技术的基石,想要熟练使用计算机,就必须懂得一点字符编码的知识. 1. ASCII码 我们知道,在计算机内部,所有的信息最终都表示为一个二进制的字符串.每一个二进制位(bit)有0和1两 ...
- SEO SEM
SEO:搜索引擎优化SEM:搜索引擎营销 SEO排名机制:搜索引擎蜘蛛 权重 算法 排名规则 搜索引擎提交入口: 1.百度搜索网站登入口 2.Google网站登入口 3.360搜索引擎登入入口 4.搜 ...
- 【spring源码学习】spring的aop目标对象中进行自我调用，且需要实施相应的事务定义的解决方案
转载:http://www.iteye.com/topic/1122740 1.预备知识 aop概念请参考[http://www.iteye.com/topic/1122401]和[http://ji ...
- normalizr api 转换类库使用
1. 项目初始化 yarn init yarn add normalizr 项目结构 app.js package.json user.json 2. 使用 a. app.js const userj ...
- 解决Vsphere Client 60天过期问题
- 初始化Lights Out 100(ilo100)密码
初始化Lights Out 100(ilo100)密码 /HP ProLiant General /HP Software /初始化Lights Out 100(ilo100)密码 2014年5月21 ...