兼容i6的三级菜单（不闪的）

最新推荐文章于 2024-06-21 10:56:12 发布
最新推荐文章于 2024-06-21 10:56:12 发布
阅读量396 收藏
点赞数
分类专栏： ie6兼容性问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bling_Bling_/article/details/51752293
版权

用jquery写在ie6下出现闪动现象，也尝试了别的方法，这个方法虽然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 charset="utf-8"/>  
<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 {
      
      position: relative; 
      width: 77px;
      
    }

    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: 77px;
      top: 0px;
    }

    li.l2-nav {
     
      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>


Bling_Bling_
关注
专栏目录
各种菜单
小时
03-25 658
1，显示和隐藏二级菜单：ie6+ html代码：  lang="en"> charset="UTF-8"> 有二级列表的下拉菜单 rel="stylesheet" type="text/css" href="css/demo1.css"> type="text/javascript" src="script/jquery-1.12.1.min.js"> type=
Maven高级
qq_45373670的博客
10-13 178
Maven高级 1.maven基础知识回顾 1.1 maven介绍 maven 是一个项目管理工具，主要作用是在项目开发阶段对Java项目进行依赖管理和项目构建。 依赖管理：就是对jar包的管理。通过导入maven坐标，就相当于将仓库中的jar包导入了当前项目中。 项目构建：通过maven的一个命令就可以完成项目从清理、编译、测试、报告、打包，部署整个过程。 ​ [外链图...
三阶段整理
WJLSH123的博客
10-13 3462
day01 - JS高级语法（一） 01 - 全局变量_局部变量 定义： 定义在function外部的变量：全局变量 定义在function内部的变量：局部变量 定义在function内部，但没有var的变量也是，适合公用的变量 使用场景 全局：很少，一直常驻内存中不易销毁，容易出现命名冲突，适合公用的变量 局部：函数执行完毕 02 - 作用域链 var point = 30; function play() { //就近原则：从内部开
Solaris高级系统管理员指南
gridyao的专栏
09-17 3045
目 录 第1章、前言 1.1了解超级用户状态 1.1.1成为超级用户（su） 1.1.2退出超级用户状态 1.1.3以root注册 1.2与用户通信 1.2.1在注册时显示系统专用信息 1.2.2将信息发送给单个用户 1.2.2.1发送一个短消息给一个单独的用户 1.2.2.2将作为一个文件的消息发给个别用户 1.2.3将消息发送给一个系统或网络中的所有用户 1.2.4通过电子邮件发送消息 1.3
第十三章：Cassandra安全--Cassandra：The Definitive Guide 2nd Edition
sunchengquan的博客
05-30 1042
使数据可访问一直是大数据运动的关键原则之一，在数据分析方面取得了巨大进步，并为企业，学术界和公众带来了实实在在的好处。与此同时，随着安全性和隐私需求的增长，这种数据可访问性也处于紧张状态。互联网规模系统暴露于不断变化的攻击集合中，这些系统保存的数据是最常见的目标。我们都知道多次引人注目的违规行为导致数据严重损失，包括个人数据，支付信息，军事情报和公司商业机密。而这些只是导致这一消息的漏洞。 这种威...
Ghost过程中出现GHOSTERR.TXT文件的解决方法
lee576的专栏
02-09 7692
强文：Ghost过程中出现GHOSTERR.TXT文件的解决方法 注：这是篇绝强的文章，作者不明，在好几个老论坛都有转载，反应很热烈，给大家共享一下小人物，大博客0Qo-GUu9F+rR:p$gY&Kh+D"Y z0在下载iso文件刻堞后使用ghost恢复安装经常会出现GHOSTERR.TXT，到底怎么回事，我的一点体会！"CG%IK9?+}1uj01、下载iso是否完整。3
Solaris高级系统管理员指南(zt)
11-12 260
Solaris高级系统管理员指南(zt)[@more@]Solaris高级系统管理员指南(zt) 目 录 第1章、前言7 1.1了解超级用户状态8 1.1.1成为超级用户（su）9 1.1.2退出超级用户状态9 1.1.3以ro...
【入门教程】2024 最新 [Blinker·点灯科技] 免费设备额度获取Arduino全套开发环境安装包下载ESP8266与32通用DHT11温湿度继电器50余张截图中文注释比代码多超详细保姆级教程
最新发布
qzlbr的博客
06-21 1122
点灯Arduino的设备sdk整体基于ESP Async TCP库进行Wi-Fi链接，上套MQTT协议层实现发布和订阅。上套B protocol实现点灯数据传输协议。上套adapter适配层实现切换设备类型，顶层blinker类作为API函数供用户调用。侧向通过类库封装组件数据解析方法。通过范型和宏定义切换Wi-Fi、AT固件、蓝牙类库。
FS-i6S使用说明书202104191
08-04
【FS-i6S使用说明书202104191】 FS-i6S是一款先进的自动跳频数字遥控系统，由Flysky Technology Co., Ltd制造。该产品旨在为用户提供高效、稳定且用户友好的遥控体验，尤其适用于模型飞机、无人机和其他遥控设备的...
FS-i6X 遥控器说明书
05-06
- 使用原装充电器和电池，避免因不兼容造成的安全隐患。 - 如果遥控器出现故障，请立即停止使用，并联系售后服务进行检查和维修。 - 不要私自拆卸遥控器，以免破坏内部结构，影响正常使用。 #### 二、产品介绍 **...
4月7号软件资讯更新合集....
2301_76369560的博客
04-07 278
3 月份，eKuiper 团队主要进行了 1.9.0 版本的开发，增加了一些重要的功能，进一步提高了 eKuiper 的性能和可用性：IO Connectors 增强。新增了多 Neuron 连接的功能；在 HTTP 连接方面，我们提供了类 oAuth 的基于动态 token 的鉴权过程的支持；此外还支持了 MQTT 连接中压缩和解压，减少边云传输的带宽损耗。分析能力增强。我们添加了许多新的转换函数，包括 JSON 字符串相关、base64 编码相关以及压缩相关的函数，方便用户更灵活地处理和转换数据流。
select兼容ie6样式
Bling_Bling_的博客
11-14 1704
.select_border { width: 300px; height: 38px; *background: #fff; background: #fff; *border: 1px solid #bdbcbc;
图片无缝滚动兼容ie6
Bling_Bling_的博客
06-24 541
图片无缝滚动，兼容ie6，以下例子，自己放图片就可以实现： jquery图片左右连续滚动 *{ margin:0; padding:0;} body { font:12px/1.8 Arial; color:#666;} h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;
ie6下常见的 兼容问题
Bling_Bling_的博客
06-24 531
1.文档类型的声明。 产生条件：IE6浏览器，当我们没有书写这个文档声明的时候，会触发IE6浏览器的怪异解析现象； 解决办法：书写文档声明。 2.不同浏览器当中，很多的标签的默认样式不同，如默认的外部丁内补丁。 产生条件：不同浏览器； 解决办法：利用CSS reset文件进行样式的清除，然后再根据需要进行设置。 3.横向双倍外边距 产生条件：在IE6中块元素浮动后，会出现横向双倍ma
input标签上传按钮兼容ie6
Bling_Bling_的博客
11-14 414
.zcsqCreate_browse { height: 31px; width: 98px; line-height: 31px; border: 1px solid #bdbcbc; border-radius: 2px;
ie6兼容png24位的方法
Bling_Bling_的博客
11-14 408
DD_belatedPNG.fix("a,span,img,div,li,p,i,ul"); 下载DD_belatedPNG_0.0.8a.js文件 放入项目，页面即可正常使用png24位图片，建议最好使用jpg格式，因为这段js可能会造成js冲突
分享 兼容ie6
Bling_Bling_的博客
06-24 400
分享效果，兼容到ie6的，jiathis插件，以下是实例： Document 分享到： 更多
Quantum Scalar i6k 用户手册：备份与存档解决方案
"昆腾Scalari6000是一款高端的企业级磁带库，适用于数据备份、恢复和归档。用户手册提供了详细的使用指南，涵盖了设备安装、配置、操作和维护等方面的信息。文档强调了昆腾公司对此出版物提供的‘原样’服务，不包含...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值