纯CSS 级联菜单实现代码

ttx9n · 发表于 2009-6-14 00:14:12

参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 操作系统：Windows 这次给项目做的级联菜单使用了纯CSS的方式，霍霍，能用CSS做的，就用CSS完成吧。早已有前辈完成过这样的实例了，我以为我能顺利完成，但没想到处处碰壁，故记录一点心得如下，供大家参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2
操作系统：Windows
这次给项目做的级联菜单使用了纯CSS的方式，霍霍，能用CSS做的，就用CSS完成吧。
早已有前辈完成过这样的实例了，我以为我能顺利完成，但没想到处处碰壁，故记录一点心得如下，供大家参阅。
废话不多说，咚咚咚，开始制作啦！
除了IE6这个坚强的孩子，其他浏览器攻克还是比较容易的。
运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="author" content="Chomo" /> 
<link rel="start" href="http://www.14px.com" title="Home" /> 
<title>三级级联菜单</title> 
<style type="text/css"> 
* { margin:0; padding:0; list-style:none;} 
.c_subNav { width:150px; } 
.c_subNav a { text-decoration:none; color:#333;} 
.c_subNav a:hover { color:#f60;} 
.c_subNav ul ul { position:absolute; display:none; 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(http://www.14px.com/wp-content/uploads/2009/05/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(http://www.14px.com/wp-content/uploads/2009/05/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 { display:block;} 
.c_subNav .li:hover ul ul { display:none;} 
.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 { display:block; 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>

提示：您可以先修改部分代码再运行
该实例完成大概就两个要点：
忌浮忌躁，一步步来，先把最低级的display:none;做。
“: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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="author" content="Chomo" /> 
<link rel="start" href="http://www.14px.com" 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>

提示：您可以先修改部分代码再运行

r8st9 · 发表于 2022-10-30 17:41:24

论坛有你更精彩！

0608fv3 · 发表于 2022-12-12 01:50:44

逛逛看看瞧瞧

feiyasqhr · 发表于 2023-10-20 10:58:24

我找了挺久终于找到了

5cf304mn2 · 发表于 2024-4-10 22:21:53

挺不错的东西

平平安安 · 发表于 2024-5-12 01:56:19

。。。。。。。。。。。。。。。

feiyasqhr · 发表于 2024-5-29 21:33:16

逛逛看看瞧瞧

8ayoqrpj · 发表于 2024-8-20 05:31:50

hi哦和烦恼农家女

8ayoqrpj · 发表于 2024-9-7 02:51:07

强烈支持楼主ing……

rveqwdpw5 · 发表于 2024-9-16 03:34:19

66666666666

账号		自动登录	找回密码
密码			立即注册

[CSS] 纯CSS 级联菜单实现代码

相关帖子