本来在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 ...
随机推荐
-
WinServer远程部署系统打包批处理文件
前言 工作中一直在使用一个部署系统WinServer远程部署系统(RDSystem),部署.回滚都很方便.我们一直都是增量发布或者只更新需要更新的文件,每次发布完之后要整理出一个增量更新包,压缩成zi ...
-
Oracle学习总结_day01_day02_表的创建_增删改查_约束
本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! 更新: SELECT * FROM (SELECT R ...
-
c# applibrary实现一个Sheet表中存放多张DataTable数据
1.工具类(applibrary.dll) public class ExcelHelper { /// <summary> /// 文件名 /// </summary> pu ...
-
JavaScript与java的异同（一）
讲个故事:话说很久很久以前,有一个叫网景(Netscape)的,十月怀胎,他生了个儿子,很开兴,给儿子取名livescript.Livescript很勤奋,帮大叔大婶干了好多活,也给他爸赚了很多钱.突 ...
-
CXF和spring整合遇到的问题：No bean named &#39;cxf&#39; is defined
今天在做ws和spring整合的时候,很不幸的遇到了这个问题,百度了好久,竟然没人遇到这个问题,后来谷歌了一下,都是遇到这个问题的了...在看到一篇文章中提到了cxf.xml,所以我果断的打开这个配置 ...
-
OVM-V1.2 版发布，新增实时监控、支持一键升级
OVM是国内首款.完全免费.企业级--混合虚拟化管理平台,OVM是从中小企业目前的困境得到启发,完全基于国内企业特点开发,更多的关注国内中小企业用户的产品需求. OVM-V1.2 该版本功能变动如下: ...
-
AsyncTask 轻量级的异步类
初步:http://www.cnblogs.com/devinzhang/archive/2012/02/13/2350070.html 详细:http://blog.csdn.net/liuhe68 ...
-
Java学习笔记（基本数据类型和变量命名规则）
java基本数据类型 变量 1.变量就是可变的量. 2.常量就是不可变的量. 3.字面量:Java的变量和常量中存放的具体的数据成为字面量. 变量 命名规则: (1)首字母是英文字母.$或下划线,由字 ...
-
数据类型MSVC和gcc/g++的不同
前言: 在16位环境下,int/unsigned int 占16位,long/unsigned long占32位 在32位环境下,int占32位,unsigned int占16位,long/unsig ...
-
Maven之（九）依赖关系
在maven的管理体系中,各个项目组成了一个复杂的关系网,但是每个项目都是平等的,是个没有贵贱高低,众生平等的世界,全球每个项目从理论上来说都可以相互依赖.就是说,你跟开发spring的大牛们平起平坐 ...