纯CSS 级联菜单实现代码

网页制作 2024/11/25 佚名

3 2 1

参与测试的浏览器：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>

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

CSS,级联菜单

标签：

CSS,级联菜单

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“纯CSS 级联菜单实现代码”

纯CSS 级联菜单实现代码

暂无“纯CSS 级联菜单实现代码”评论...

纯CSS 级联菜单实现代码

CSS,级联菜单

CSS 清除网页浮动经验

IE和FireFox JavaScript的函数名的作用域的异同

评论“纯CSS 级联菜单实现代码”

更新动态

友情链接

纯CSS 级联菜单实现代码

CSS,级联菜单

CSS 清除网页浮动 经验

IE和FireFox JavaScript的函数名的作用域的异同

评论“纯CSS 级联菜单实现代码”

更新动态

友情链接

CSS 清除网页浮动经验