全兼容的纯CSS级联菜单

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

全兼容的纯CSS级联菜单
参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2
操作系统：Windows
蓝⾊理想经典论坛⾸发，转载请注明出处
这次给项⽬做的级联菜单使⽤了纯CSS的⽅式，霍霍，能⽤CSS做的，就⽤CSS完成吧。

早已有前辈完成过这样的实例了，我以为我能顺利完成，但没想到处处碰壁，故记录⼀点⼼得如下，供⼤家参阅。

废话不多说，咚咚咚，开始制作啦！
除了IE6这个坚强的孩⼦，其他浏览器攻克还是⽐较容易的。

该实例完成⼤概就两个要点：
1. 忌浮忌躁，⼀步步来，先把最低级的display:none;做。

2. “:hover伪类”的使⽤，默认状态“display:none;”，“:hover”时则“display:block;”则能很容易完成。

⽽IE6下折腾就⽐较复杂了，经过头破⾎流的教训之后，总结出关键四点：
1. 原理：IE6仅<a>标签⽀持:hover伪类，但如果a标签⾥⾯再嵌⼊a标签，⾥⾯的a标签将不会⽣效，所以必须在之间套加⼀层<table>；
<!–[if IE 6]><a href="#nogo"><table><tr><td><![endif]–>
内容部分可以含有<a>标签
<!–[if IE 6]></td></tr></table></a><![endif]–>
2. 关键样式名：这个⽤于:hover效果的a标签的命名，如果使⽤与<li>⼀致的样式名（在⾮IE6中是li:hover产⽣的效果），将不⽤再另写样式代码，不仅节省了代码开销，⽽且可维性更好；（这个是省时省⼒的关键）
<li class="li">
<!–[if IE 6]><a class="li" href="#nogo"><table><tr><td>
<![endif]–>
内容部分可以含有<a>标签
<!–[if IE 6]></td></tr></table></a><![endif]–>
</li>
3. visibility的使⽤：采⽤display的话将出现onmouseout时上⼀次显⽰的optionGroup仍然不消失的情况
.c_subNav .li:hover ul { visibility:visible;}
4.table的设置： [含泪ing]table⼀定要记得width:100%;啊，⼀定要记得啊，⼀定要记得啊，⼀定要记得啊。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta
name="author" content="Chomo" /> <link rel="start" href="" title="Home" /> <title>三级级联菜单</title> <style
type="text/css"> * { margin:0; padding:0; list-style:none;} .c_subNav { width:150px; } .c_subNav table { width:100%; border-
collapse:collapse;} .c_subNav a { text-decoration:none; color:#333;} .c_subNav a:hover { color:#f60;} .c_subNav ul ul { position:absolute; visibility:hidden; right:-150px; top:-1px;} .c_subNav li { border-bottom:1px solid #ccc; position:relative; _position:static; float:left;
width:100%;} .c_subNav a.li { position:relative;} .c_subNav li .option { display:block; line-height:15px; padding:5px 5px 5px 25px; background:no-repeat 5px 4px; cursor:pointer; font:12px Verdana; zoom:1; background:url(img/ico.gif) no-repeat;} .c_subNav li
.option:hover { color:#f60; background-color:#ffa;} .c_subNav li .option span { display:block; padding-right:15px; background:url(img/ico.gif) no-repeat right 0;} .c_subNav li .option:hover span { background-position:right -15px;} .c_subNav .li:hover { z-index:2;
background:transparent;} .c_subNav .li:hover ul { visibility:visible;} .c_subNav .li:hover ul ul { visibility:hidden;} .c_subNav .li:hover ul { border:1px solid #ccc; border-width:1px 2px 2px 1px; width:150px; background:#fff; padding:1px;} .c_subNav .li:hover li { border-bottom:none;} .c_subNav .li:hover li .option { padding:2px 5px; background:transparent;} .c_subNav .li:hover li .option:hover { background:#0096ff; color:#fff;} .c_subNav .li:hover li .option:hover span { background-position:right -30px;} .c_subNav .li:hover .li:hover ul { visibility:visible; left:145px; top:-2px;} /*---图标差异---*/ .c_subNav .charges .option { background-position:4px -45px;} .c_subNav .biz .option { background-position:4px -70px;} .c_subNav .change .option { background-position:4px -95px;} .c_subNav .score .option { background-position:4px -120px;} .c_subNav .server .option { background-position:4px -145px;} .c_subNav .edit .option { background-position:4px -170px;} .c_subNav .sms .option { background-position:4px -195px;} </style> </head> <body> <div class="c_subNav"> <ul> <li class="li charges">  <a href="#nogo" class="option"><span>话费服务</span></a> <ul> <li class="li">  <a href="#nogo" class="option"><span>话费查询
</span></a> <ul> <li class="li"><a href="#nogo" class="option">实时话费查询</a></li> <li class="li"><a href="#nogo" class="option">话费余额查询</a></li> <li class="li"><a href="#nogo" class="option">⽉账单查询</a></li> <li class="li"><a href="#nogo" class="option">⽉详单查询</a></li> <li class="li"><a href="#nogo" class="option">缴费历史查询</a></li> <li class="li"><a href="#nogo" class="option">资费优选推荐</a></li> </ul>  </li> <li class="li">  <a href="#nogo" class="option"><span>定制话费信息</span></a> <ul> <li class="li"><a href="#nogo" class="option">定制短信账单</a></li> <li class="li"><a href="#nogo" class="option">话费余额短信提醒</a></li> <li class="li"><a href="#nogo" class="option">定制Email账单</a></li> </ul>  </li> <li class="li">  <a href="#nogo" class="option"><span>⽹上交费</span></a> <ul> <li class="li"><a href="#nogo" class="option">⽹上缴费</a></li> <li class="li"><a href="#nogo" class="option">充值卡缴费</a></li> </ul>  </li> </ul>  </li> <li class="li biz">  <a
href="#nogo" class="option"><span>业务办理</span></a> <ul> <li class="li">  <a href="#nogo" class="option"><span>⽇常业务办理</span></a> <ul> <li class="li"><a href="#nogo" class="option">来电显⽰</a></li> <li class="li"><a href="#nogo" class="option">呼叫等待</a></li> <li class="li"><a href="#nogo" class="option">呼叫转移</a></li> <li class="li"><a href="#nogo" class="option">三⽅通话</a></li> <li class="li"><a href="#nogo" class="option">来电提醒</a></li> <li
class="li"><a href="#nogo" class="option">呼叫保持</a></li> <li class="li"><a href="#nogo" class="option">呼叫转移设置</a></li> <li class="li"><a href="#nogo" class="option">主叫隐藏</a></li> <li class="li"><a href="#nogo" class="option">彩铃</a></li> <li class="li"><a href="#nogo" class="option">国内漫游</a></li> <li class="li"><a href="#nogo" class="option">短信回执</a></li> <li class="li"><a
href="#nogo" class="option">12580综合信息</a></li> <li class="li"><a href="#nogo" class="option">关爱⼀线通</a></li> </ul>  </li> <li class="li">  <a href="#nogo" class="option"><span>数据业务</span></a> <ul> <li class="li"><a href="#nogo" class="option">⼿机上⽹</a></li> <li class="li"><a
href="#nogo" class="option">GPRS</a></li> <li class="li"><a href="#nogo" class="option">飞信</a></li> <li class="li"><a href="#nogo" class="option">⼿机报</a></li> <li class="li"><a href="#nogo" class="option">⽆线⾳乐俱乐部</a></li> <li class="li"><a href="#nogo" class="option">⼿机邮箱</a></li> <li class="li"><a href="#nogo" class="option">号簿管家</a></li> <li class="li"><a href="#nogo"
class="option">WLAN业务</a></li> <li class="li"><a href="#nogo" class="option">彩乐短信</a></li> </ul>  </li> <li class="li">  <a href="#nogo" class="option">
<span>⼿机报停/报开</span></a> <ul> <li class="li"><a href="#nogo" class="option">⼿机报停</a></li> <li class="li"><a href="#nogo" class="option">⼿机复机</a></li> </ul>  </li> <li class="li"> <a href="#nogo" class="option">梦⽹查询与退订</a> </li> </ul>  </li> <li class="li change">  <a href="#nogo" class="option"><span>套餐办理与变更</span></a> <ul> <li class="li"><a
href="#nogo" class="option">GPRS套餐变更</a></li> <li class="li"><a href="#nogo" class="option">产品变更</a></li> </ul>  </li> <li class="li score">  <a
href="#nogo" class="option"><span>积分计划</span></a> <ul> <li class="li"><a href="#nogo" class="option">积分查询</a></li> <li
class="li"><a href="#nogo" class="option">积分兑换</a></li> <li class="li"><a href="#nogo" class="option">积分明细查询</a></li> <li class="li"><a href="#nogo" class="option">积分兑换话费</a></li> <li class="li"><a href="#nogo" class="option">积分兑换历史查询</a>
</li> </ul>  </li> <li class="li server">  <a href="#nogo" class="option"><span>在线客服</span></a> <ul> <li class="li"><a href="#nogo" class="option">号码归属地查询</a></li> <li class="li"><a href="#nogo" class="option">营业厅查询</a></li> <li class="li"><a href="#nogo" class="option">⼿机仿真</a> </li> <li class="li"><a href="#nogo" class="option">在线咨询</a></li> </ul>  </li> <li class="li edit">  <a href="#nogo" class="option"><span>个⼈信息管理</span></a> <ul> <li class="li"><a href="#nogo" class="option">个⼈资料修改</a></li> <li class="li"><a href="#nogo" class="option">服务密码变更</a> </li> <li class="li"><a href="#nogo" class="option">服务密码重置</a></li> <li class="li"><a href="#nogo" class="option">PUK码查询</a> </li> <li class="li"><a href="#nogo" class="option">套餐使⽤状态查询</a></li> <li class="li"><a href="#nogo" class="option">业务开通状态查询</a></li> </ul>  </li> <li class="li sms"> <a href="#nogo" class="option">短信息服务</a> </li> </ul> </div> </body> </html>。