彩票走势图

产品

产品
资讯
资源
视频
学院
示例

产品中心
解决方案
行业方案
视频课程
关于慧都

热门产品

UI界面: DevExpress telerik BCGSoft Developer Machines

文档管理: Aspose E-iceblue GrapeCity PDFlib

图表控件: LightningChart Steema Iocomp

数据采集: TAKEBISHI Matrikon

思维导图: TheBrain XMind

开发工具: IntelliJ IDEA MyEclipse Zend PyCharm WebStorm CLion

报表控件: Fast Report Stimulsoft GrapeCity

加密解密: VMPsoft Eziriz Oreans

项目管理: DHTMLX NETRONIC

数据库管理: Devart PremiumSoft

条码工具: Bartender Softek Dynamsoft TEC-IT Byte Aspose.BarCode

解决方案

软件定制解决方案: 软件系统定制高端UI定制业务系统定制

智能制造解决方案: OMES制造执行系统 APS生产排程系统 OQMS质检管理系统 OPTS生产溯源系统 OTPM设备管理系统 OKanban看板管理 DA工业数据采集系统 SRM供应商管理 PDM产品数据管理 WMS仓储管理 OMES ProLine产线MES系统

行业方案

制造行业: 磁性材料行业hot 汽车零配件行业电子行业精密装配行业钣金行业机械加工行业汽车改装行业金属薄膜材料行业灯具照明行业电线电缆行业钢结构行业

其他行业: 石油行业hot 医疗行业金融行业建筑行业

视频课程

产品视频: UI界面类图标报表网络通讯文档管理矢量图像处理位图图像处理音频视频文件格式转码条形码加密解密测试分析地图/CAD/GIS BI/大数据算法工作流 UML 数据库/服务器 IDE 项目管理思维导图其他移动开发扫描识别条形码

学院课程: VIP视频免费视频用户界面图表报表文档管理大数据工作流项目管理测试分析往期公开课项目管理其他

企业培训: 定制培训班

关于慧都

慧都简介慧都文化联系我们合作伙伴典型客户

彩票走势图 > 资讯 > 纯CSS多级菜单2

纯CSS多级菜单2

原创|其它|编辑：郝浩|2009-09-28 10:05:47.000|阅读 1457 次

概述：这部分最后给出的成品效果比较惊人，也就是传说中的纯CSS六级菜单。这个东西最厉害的地方是兼容所有主流浏览器（IE6，IE8，Maxthon2.5，firefox3.5，opera10，safari4与chrome2），而一点CSS hack也没有用。毕竟CSS hack只是权宜之计，治标不治本，谁知它会对未来新版本的浏览器有什么副作用，因此能不用就不要用了。由于结构非常有规律，读者认真学习后，可以自行扩展为十级菜单。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

这部分最后给出的成品效果比较惊人，也就是传说中的纯CSS六级菜单。这个东西最厉害的地方是兼容所有主流浏览器（IE6，IE8，Maxthon2.5，firefox3.5，opera10，safari4与chrome2），而一点CSS hack也没有用。毕竟CSS hack只是权宜之计，治标不治本，谁知它会对未来新版本的浏览器有什么副作用，因此能不用就不要用了。由于结构非常有规律，读者认真学习后，可以自行扩展为十级菜单。

由于IE6能支持的伪类少得可怜，仅支持a元素的hover与visited与active。为了显示隐藏的二级菜单，我们必须把二级菜单的那个无序列表放到a元素下，但这样一来firefox那边又发难了。这时我们就要请出IE的条件注释，让页面在IE6下呈现一套结构层，在其他浏览器下呈现另一套。

<div class="menu"> 
  <ul> 
    <li> 
      <a href="">菜单三<!--[if !IE 6]><!--></a><![endif]--> 
      <ul> 
        <li><a href="">二级菜单_11</a></li> 
        <li><a href="">二级菜单_12</a></li> 
      </ul> 
      <!--[if lte IE 6]></a><![endif]-->
    </li> 
    <li> 
      <a href="">菜单二<!--[if !IE 6]><!-->二</a><![endif]--> 
      <ul> 
        <li><a href="">二级菜单_11</a></li> 
        <li><a href="">二级菜单_12</a></li> 
      </ul> 
      <!--[if lte IE 6]></a><![endif]-->
    </li> 
    <li> 
      //************略*********** 
    </li> 
    <li> 
      //************略*********** 
    </li> 
  </ul> 
</div>

但是这样做不能使IE6的二级菜单弹出来，这情形我在纯CSS相册遇到许多次。查一下国外的资料，说是IE用hover切换绝对定位子元素时存在问题，但具体情形又分许多种，解法也不一。但针对多级菜单的这种多层子元素，最常用的方法是把它们套在table中，这相当于table布局。因为table的容错能力是最强的，这多得人们一直用它来布局，于是浏览器一直在增强它在这方面的优势。感谢table，我们终于收拾IE6这个怪胎了。

<div class="menu"> 
    <ul> 
      <li> 
        <a href="">菜单<!--[if !IE 6]><!--><strong>一</strong></a><![endif]--> 
        <table><tr><td> 
              <ul> 
                <li><a href="">二级菜单_11</a></li> 
                <li><a href="">二级菜单_12</a></li> 
              </ul> 
        </td></tr></table> 
        <!--[if lte IE 6]></a><![endif]-->
      </li> 
      <li> 
        <a href="">菜单<!--[if !IE 6]><!--><strong>二</strong></a><![endif]--> 
        <table><tr><td> 
              <ul> 
                <li><a href="">二级菜单_11</a></li> 
                <li><a href="">二级菜单_12</a></li> 
              </ul> 
        </td></tr></table> 
        <!--[if lte IE 6]></a><![endif]-->
      </li> 
      <li> 
        //*************略************** 
      </li> 
      <li> 
        //*************略************** 
      </li> 
    </ul> 
  </div>

但这样一来对firefox等浏览器添加了许多多余的结构层代码，它们基本不需要table这东西就能运作良好。因此，我们把table整到IE条件注释中。如：

<div class="menu"> 
    <ul> 
      <li> 
        <a href="">菜单 
        <!--[if !IE 6]><!--><strong>一</strong></a><![endif]--> 
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul> 
          <li><a href="">二级菜单_11</a></li> 
          <li><a href="">二级菜单_12</a></li> 
        </ul> 
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
      </li> 
      <li> 
        //*************略************ 
      </li> 
      <li> 
        //*************略************ 
      </li> 
      <li> 
       //*************略************ 
      </li> 
    </ul> 
  </div>

然而，这结构层还能进一步精简。同时我们应该留意到IE6水平菜单的异常高度，这是IE6的li元素在包含块级显示元素时会多出5px空隙。由于li元素包含的结构比较复杂，以前用对付img元素的几种方法行不通了。我们可以显式设置a元素的高度，让多余的部分隐藏掉就是。这就唯一不用CSS hack的方法。

更精简的结构层：

<div class="menu"> 
   <ul> 
     <li> 
       <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
       <a href="">菜单一</a> 
       <ul> 
         <li><a href="">二级菜单_11</a></li> 
         <li><a href="">二级菜单_12</a></li> 
       </ul> 
       <!--[if lte IE 6]></td></tr></table></a><![endif]-->
     </li> 
     <li> 
        //***********略********* 
     </li> 
     <li> 
        //***********略********* 
     </li> 
     <li> 
        //***********略********* 
     </li> 
   </ul> 
 </div>

.menu a { 
  display:block; 
  /*position:relative;发现放在a元素中， 
  在标准游览器中惨不忍睹， 
  和纯CSS相册3的第一个运行框在chrome中遇到的bug一样*/
  height:32px; 
  width:100px; 
  line-height:32px; 
  background:#a9ea00; 
  color:#ff8040; 
  text-decoration:none; 
  text-align:center; 
  overflow:hidden;/*★★★★*/
}

基于上面的结构我们就可以开发多级子菜单了。

这时我们又发现在IE6下，当我们的鼠标移到二级菜单的上面时，一级菜单项会出现一个边框，颜色为hover时的背景色。在IE6，table与单元格之间(cellspacing)，单元格与单元格的内容之间(cellspadding)是存在空隙，背景色为transparent，也就是说永远显示下一层的背景色。由于我们设置a的display:block，它会占满td的所有空间，因此那个神秘的边框应该是cellspacing。我们可以用以下的方式证实我的猜想。

.menu table { 
  border:1px solid aqua; 
} 
.menu table td{ 
  border:1px solid aqua; 
}

知道问题的所在，我们就可以对症下药了。解决方法有二。一是设置cellspacing等于零。由于cellspacing为DOM属性，非CSS属性，换言之，有多少个table我们就要写多少次。二是设置border-collapse 为collapse，因为这样会把table与它里面的td的border合而为一，这样它们之间的空隙也不复存在。我们当然选择第二种啦。

.menu table { 
  border-collapse: collapse; 
}

<!doctype html> <title>纯CSS多级菜单by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="纯CSS多级菜单 by 司徒正美" /> <meta name="description" content="纯CSS多级菜单 by 司徒正美" /> </head> <body> <style type="text/css"> * { margin:0; padding:0; } .menu { font-size:12px; } .menu li {/*水平菜单*/ float:left; list-style:none; position:relative;/*把包含块移动li元素*/ } .menu a { display:block; height:32px; width:100px; line-height:32px; background:#a9ea00; color:#ff8040; text-decoration:none; text-align:center; overflow:hidden;/*★★★★*/ } .menu a:hover { background:#369; color:#fff; } /*新增的二级菜单部分*/ .menu ul ul { visibility:hidden;/*隐藏所有子菜单（二级的,三级的）*/ position:absolute; left:0px; top:32px; } /*指定是显示二级子菜单*/ .menu ul li:hover ul.second,/*非IE6*/ .menu ul a:hover ul.second{/*IE6*/ visibility:visible; } .menu ul ul li { clear:both;/*垂直显示*/ text-align:left; } .menu .third,.menu .fourth,.menu .fifth,.menu .sixth{ top:0px;/*重设子菜单相对于包含块哪个位置出现*/ left:100px; } /*指定是显示三级子菜单*/ .menu ul ul li:hover ul.third, .menu ul ul a:hover ul.third{ visibility:visible; } /*指定是显示四级子菜单*/ .menu ul ul ul li:hover ul.fourth, .menu ul ul ul a:hover ul.fourth{ visibility:visible; } /*指定是显示五级子菜单*/ .menu ul ul ul ul li:hover ul.fifth, .menu ul ul ul ul a:hover ul.fifth{ visibility:visible; } /*指定是显示六级子菜单*/ .menu ul ul ul ul ul li:hover ul.sixth, .menu ul ul ul ul ul a:hover ul.sixth{ visibility:visible; } /*重设子菜单在鼠标滑过时的样式，有多少个ul就表明当前是多少级子菜单*/ /*二级子菜单*/ .menu ul ul a:hover{ background:black; color:white; } /*三级子菜单*/ .menu ul ul ul a:hover{ background:#B45B3E; color:#369; } .menu ul ul ul ul a:hover{ background:#FFE8AA; color:#68DFFB; } .menu ul ul ul ul ul a:hover{ background:#8080C0; color:#F8F8F8; } .menu ul ul ul ul ul ul a:hover{ background:#f00; color:#000; } .menu table{ border-collapse:collapse; } </style> <h3>纯CSS多级菜单 by 司徒正美</h3> <p>这是六级菜单，只要页面够长，十级也能弄出来！</p> <div class="menu"> <ul> <li>  <a href="//www.cnblogs.com/rubylouvre/">菜单一</a> <ul class="second"> <li>  <a href="//www.cnblogs.com/rubylouvre/">二级菜单_11</a> <ul class="third"> <li>  <a href="//www.cnblogs.com/rubylouvre/">三级菜单_11</a> <ul class="fourth"> <li>  <a href="//www.cnblogs.com/rubylouvre/">四级菜单_11</a> <ul class="fifth"> <li>  <a href="//www.cnblogs.com/rubylouvre/">五级菜单_11</a> <ul class="sixth"> <li><a href="//www.cnblogs.com/rubylouvre/">六级菜单_11</a></li> <li><a href="//www.cnblogs.com/rubylouvre/">六级菜单_12</a></li> <li><a href="//www.cnblogs.com/rubylouvre/">六级菜单_13</a></li> </ul>  </li> <li>  <a href="//www.cnblogs.com/rubylouvre/">五级菜单_11</a> <ul class="sixth"> <li><a href="//www.cnblogs.com/rubylouvre/">六级菜单_11</a></li> <li><a href="//www.cnblogs.com/rubylouvre/">六级菜单_12</a></li> <li><a href="//www.cnblogs.com/rubylouvre/">六级菜单_13</a></li> </ul>  </li> <li>  <a href="//www.cnblogs.com/rubylouvre/">五级菜单_11</a> <ul class="sixth"> <li><a href="//www.cnblogs.com/rubylouvre/">六级菜单_11</a></li> <li><a href="//www.cnblogs.com/rubylouvre/">六级菜单_12</a></li> <li><a href="//www.cnblogs.com/rubylouvre/">六级菜单_13</a></li> </ul>  </li> </ul>  </li> <li> <a href="//www.cnblogs.com/rubylouvre/">五级菜单_12</a> <ul class="sixth"> <li><a href="//www.cnblogs.com/rubylouvre/">六级菜单_11</a></li> <li><a href="//www.cnblogs.com/rubylouvre/">六级菜单_12</a></li> <li><a href="//www.cnblogs.com/rubylouvre/">六级菜单_13</a></li> </ul> </li> </ul>  </li> <li><a href="//www.cnblogs.com/rubylouvre/">三级菜单_12</a></li> <li><a href="//www.cnblogs.com/rubylouvre/">三级菜单_13</a></li> <li><a href="//www.cnblogs.com/rubylouvre/">三级菜单_14</a></li> </ul>  </li> <li>  <a href="//www.cnblogs.com/rubylouvre/">二级菜单_12</a> <ul class="third"> <li>  <a href="//www.cnblogs.com/rubylouvre/">三级菜单_21</a> <ul class="fourth"> <li><a href="//www.cnblogs.com/rubylouvre/">四级菜单_21</a></li> <li><a href="//www.cnblogs.com/rubylouvre/">四级菜单_22</a></li> </ul>  </li> <li><a href="//www.cnblogs.com/rubylouvre/">三级菜单_22</a></li> <li><a href="//www.cnblogs.com/rubylouvre/">三级菜单_23</a></li> <li><a href="//www.cnblogs.com/rubylouvre/">三级菜单_24</a></li> </ul>  </li> </ul>  </li> <li>  <a href="//www.cnblogs.com/rubylouvre/">菜单二</a> <ul class="second"> <li><a href="//www.cnblogs.com/rubylouvre/">二级菜单_21</a></li> <li>  <a href="//www.cnblogs.com/rubylouvre/">二级菜单_22</a> <ul class="third"> <li><a href="//www.cnblogs.com/rubylouvre/">三级菜单_21</a></li> <li><a href="//www.cnblogs.com/rubylouvre/">三级菜单_22</a></li> <li>  <a href="//www.cnblogs.com/rubylouvre/">三级菜单_23</a> <ul class="fourth"> <li><a href="//www.cnblogs.com/rubylouvre/">四级菜单_21</a></li> <li><a href="//www.cnblogs.com/rubylouvre/">四级菜单_22</a></li> <li>  <a href="//www.cnblogs.com/rubylouvre/">四级菜单_23</a> <ul class="fifth"> <li><a href="//www.cnblogs.com/rubylouvre/">五级菜单_21</a></li> <li><a href="//www.cnblogs.com/rubylouvre/">五级菜单_22</a></li> <li>  <a href="//www.cnblogs.com/rubylouvre/">五级菜单_23</a> <ul class="sixth"> <li><a href="//www.cnblogs.com/rubylouvre/">六级菜单_21</a></li> <li><a href="//www.cnblogs.com/rubylouvre/">六级菜单_22</a></li> <li><a href="//www.cnblogs.com/rubylouvre/">六级菜单_23</a></li> <li><a href="//www.cnblogs.com/rubylouvre/">六级菜单_24</a></li> <li><a href="//www.cnblogs.com/rubylouvre/">六级菜单_25</a></li> <li><a href="//www.cnblogs.com/rubylouvre/">六级菜单_26</a></li> </ul>  </li> </ul>  </li> </ul>  </li> </ul>  </li> </ul>  </li> <li>  <a href="//www.cnblogs.com/rubylouvre/">菜单三</a> <ul class="second"> <li><a href="//www.cnblogs.com/rubylouvre/">二级菜单_31</a></li> <li><a href="//www.cnblogs.com/rubylouvre/">二级菜单_32</a></li> </ul>  </li> <li>  <a href="//www.cnblogs.com/rubylouvre/">菜单四</a> <ul class="second"> <li>  <a href="//www.cnblogs.com/rubylouvre/">二级菜单_41</a> <ul class="third"> <li><a href="//www.cnblogs.com/rubylouvre/">三级菜单_41</a></li> <li><a href="//www.cnblogs.com/rubylouvre/">三级菜单_42</a></li> <li><a href="//www.cnblogs.com/rubylouvre/">三级菜单_43</a></li> <li><a href="//www.cnblogs.com/rubylouvre/">三级菜单_44</a></li> </ul>  </li> <li><a href="//www.cnblogs.com/rubylouvre/">二级菜单_42</a></li> </ul>  </li> </ul> </div> </body> </html>

司徒正美纯CSS多级菜单

最后总结一下：

保证hover时，对应的子菜单的top与left在包含块的范围内。
通常我们是用hover来调用display实现子元素的隐现，但在IE6中，mouseout后它不会乖乖消失，得换visibility上阵。
某些浏览器在用a:hover来切换绝对定位子元素存在bug，统一用li:hover实现。
在IE6中，激活父级元素的a:hover后再调用其子孙元素的a:hover时，会没有反应，换言之，不继续向下渲染。这时我们需要table这个容错能力最强的标签出马。
为了跨平台的需要，我们需要用到IE条件注释来切换相应的结构层代码。
在IE6中，当li元素包含display为block的元素时（如a）会多出5px，我们可以用overflow:hidden收拾之。
在IE6中，table与td是存在空隙，当我们移动某个子菜单项时，其父菜单项就会因为这些透明的空间而染上两条边。解决方法：设置table的border-collapse为collapse。

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自：博客园

上一篇：javascript必知必会之this关键字及scope 下一篇：QueryBuilder ：打造优雅的Linq To SQL动态查询