可以兼容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 ...
随机推荐
- ECMAScript 6 基础入门
0. ECMAScript 与 JavaScript ECMAScript (ECMA 262)是 JavaScript 语言标准的名字,ECMAScript 是标准,JavaScript 是各厂商的 ...
- Weinre(pc调试手机页面)
Weinre是一款基于Web Inspector(Webkit)的远程调试工具,借助于网络,可以在PC上直接调试运行在移动设备上的远程页面,中文意思是远程Web检查器,有了Weinre,在P ...
- [转载][QT][SQL]sql学习记录2_sqlite数据类型
转载自:sqlite学习网站: http://www.runoob.com/sqlite/sqlite-tutorial.html SQLite 语法 SQLite 是遵循一套独特的称为语法的规则和 ...
- HDU - 6397：Character Encoding （组合数&容斥）
题意:T组数据,给次给出N,M,K,多少种方案,用[0,N-1]范围的数,表示一个M排列,其和为K: 思路:隔板法,不限制[0,N-1]的时候答案是C(M+K-1,M-1):那么我们减去至少一个> ...
- new Date()相关获取当月天数和当月第一天
var myDate = new Date(); //获取本月第一天周几 var monthFirst = new Date(myDate.getFullYear(), parseInt(myDat ...
- 数字证书在web应用中实现登陆
1数字证书登录认证的优点 作为企业信息系统的第一道大门,身份认证是确保企业信息资源只能被合法用户所访问的重要保障. 传统的口令认证方式虽然简单,但是由于其易受到窃听.重放等攻击的安全缺陷,使其已无法满 ...
- 《DSP using MATLAB》示例Example7.9
代码: wp = 0.2*pi; ws = 0.3*pi; As = 50; tr_width = ws - wp; M = ceil((As-7.95)/(2.285*tr_width) + 1 ) ...
- 《DSP using MATLAB》示例 Example 6.25
代码: % x = [-0.9, 0.81]; [y, L, B] = QCoeff(x, 3) % Unquantized parameters r = 0.9; theta = pi/3; a1 ...
- Tornado之架构概述图
一.Tornado之架构概述图 二.Application类详细分析: #!/usr/bin/env python # -*- coding: utf8 -*- # __Author: "S ...
- container-diff 谷歌开源镜像分析工具使用
1. 安装 curl -LO https://storage.googleapis.com/container-diff/latest/container-diff-linux-amd64 & ...