可以兼容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 ...
随机推荐
- 小程序开发之scroll-view中id不能以数字开头的问题
在实现这样的一个功能时, 调用微信小程序api发现scroll中可以通过id来实现点击菜单栏,屏幕滚动到对应的id位置 但是id不能以数字,汉字类型的 字符串开头(暂发现两种),可能博主比较笨,想 ...
- requestAnimationFrame 兼容不支持时的问题
(function() { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for (var x = 0; x < v ...
- Java并发--并发容器之ConcurrentHashMap
下面这部分内容转载自: http://www.haogongju.net/art/2350374 JDK5中添加了新的concurrent包,相对同步容器而言,并发容器通过一些机制改进了并发性能.因为 ...
- Linux shell字符串截取与拼接
一 Linux 的字符串截取很有用.有八种方法. 假设有变量 var=http://www.linuxidc.com/123.htm 1 # 号截取,删除左边字符,保留右边字符. echo ${va ...
- 语义版本号（Semantic Versioning）
版本号格式不陌生吧,.NET 传统的版本号格式类似这样 1.5.1254.0.本文将推荐一种新的版本号格式——语义版本号,格式类似这样 1.4.6-beta.我推荐语义版本号是因为这样的版本号自包含语 ...
- .NET中查看一个强命名程序集（*****.dll）的PublicKeyToken的方法
使用命令行工具SDK Command Prompt,键入:SN -T C:\*****.dll (dll文件所在的路径) 就会显示出该dll具体的PublicKeyToken数值. 如果该程序集没有 ...
- css 常用类名
1.页面结构 容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column ...
- LG3690 【模板】Link Cut Tree （动态树）
题意 给定n个点以及每个点的权值,要你处理接下来的m个操作.操作有4种.操作从0到3编号.点从1到n编号. 0:后接两个整数(x,y),代表询问从x到y的路径上的点的权值的xor和.保证x到y是联通的 ...
- 第06篇 MEF部件的生命周期(PartCreationPolicy)
一.演示概述 本演示介绍了MEF的生命周期管理,重点介绍了导出部件的三种创建策略,分别是:CreationPolicy.Any.CreationPolicy.Shared.CreationPolicy ...
- 13 Stream Processing Patterns for building Streaming and Realtime Applications
原文:https://iwringer.wordpress.com/2015/08/03/patterns-for-streaming-realtime-analytics/ Introduction ...