可以兼容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 ...

随机推荐

python中利用类创建的对象来保存信息
在类创建的对象中,一般都是以字典的方式来保存信息 class Student: def __init__(self, name, age, score): self.name = name self. ...
全球常用NTP服务器地址及IP列表ntpdate
pool.ntp.org是一组授时服务器虚拟集群,在全球有3000多台服务器,只需要这样写就行了,具体哪台服务器提供服务无需关心. time.windows.com 微软 asia.pool.nt ...
cordova学习-基础篇
Cordova 学习笔记(一):快速开始 1.安装cordova Cordova安装可以通过node.js从npm上获取.npm install -g cordova 通过这个命令可以安装cordov ...
当我们使用 MVVM 模式时，我们究竟在每一层里做些什么？
这篇文章不会说 MVVM 是什么,因为讲这个的文章太多了:也不会说 MVVM 的好处,因为这样的文章也是一搜一大把.我只是想说说我们究竟应该如何理解 M-V-VM,当我们真正开始写代码时,应该在里面的 ...
《DSP using MATLAB》示例Example 8.14
%% ------------------------------------------------------------------------ %% Output Info about thi ...
simulink使用system test测试（matlab2014a）
simulink中有个工具system test,tools->systemtest->launch system test 打开.打开之后界面是这样的选择insert->test ...
liunx系统环境下，爆出该错误"org.eclipse.wst.validation" has been removed解决办法
导出maven工程遇到的问题,"org.eclipse.wst.validation" has been removed,还以为是工程本身的问题,后来发现是eclipse的问题. ...
[语法]C语言中二维数组做输入参数
C语言中二维数组做输入参数时, 可以同时指定各维长度, 可以只指定第二维的长度, 不可以只指定第一维的长度, 不可以各维长度都不指定. 一句话总结:要指定至少指定第二维,都不指定是不行的. 具体栗子如 ...
cookie控制登陆时间
使用cookie实现永久登陆 1,在cookie里面保存账号密码然后和数据库核对(由于我没有使用数据库,就不用了 2,在cookie里面保存时间戳和账号使用加密解密(我也没有使用时间戳思路,requ ...
Linux 内核源码目录结构
arch:包含和硬件体系结构相关的代码,每种平台占用一个相应的目录. block:块设备驱动程序 I/O 调度. crypto:常用加密和散列算法(如AES.SHA等),还有一些压缩和CRC校验算法. ...

可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现

可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现的更多相关文章

随机推荐

热门专题