全兼容的纯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" mce_href="http://www.14px.com" title="Home" /> <title>三级级联菜单</title> <mce: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;} --></mce:style><style type="text/css" mce_bogus="1">* { 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" mce_href="#nogo" class="option"><span>话费服务</span></a> <ul> <li class="li"> <a href="#nogo" mce_href="#nogo" class="option"><span>话费查询</span></a> <ul> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">实时话费查询</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">话费余额查询</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">月账单查询</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">月详单查询</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">缴费历史查询</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">资费优选推荐</a></li> </ul> </li> <li class="li"> <a href="#nogo" mce_href="#nogo" class="option"><span>定制话费信息</span></a> <ul> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">定制短信账单</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">话费余额短信提醒</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">定制Email账单</a></li> </ul> </li> <li class="li"> <a href="#nogo" mce_href="#nogo" class="option"><span>网上交费</span></a> <ul> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">网上缴费</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">充值卡缴费</a></li> </ul> </li> </ul> </li> <li class="li biz"> <a href="#nogo" mce_href="#nogo" class="option"><span>业务办理</span></a> <ul> <li class="li"> <a href="#nogo" mce_href="#nogo" class="option"><span>日常业务办理</span></a> <ul> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">来电显示</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">呼叫等待</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">呼叫转移</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">三方通话</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">来电提醒</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">呼叫保持</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">呼叫转移设置</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">主叫隐藏</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">彩铃</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">国内漫游</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">短信回执</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">12580综合信息</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">关爱一线通</a></li> </ul> </li> <li class="li"> <a href="#nogo" mce_href="#nogo" class="option"><span>数据业务</span></a> <ul> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">手机上网</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">GPRS</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">飞信</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">手机报</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">无线音乐俱乐部</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">手机邮箱</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">号簿管家</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">WLAN业务</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">彩乐短信</a></li> </ul> </li> <li class="li"> <a href="#nogo" mce_href="#nogo" class="option"><span>手机报停/报开</span></a> <ul> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">手机报停</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">手机复机</a></li> </ul> </li> <li class="li"> <a href="#nogo" mce_href="#nogo" class="option">梦网查询与退订</a> </li> </ul> </li> <li class="li change"> <a href="#nogo" mce_href="#nogo" class="option"><span>套餐办理与变更</span></a> <ul> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">GPRS套餐变更</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">产品变更</a></li> </ul> </li> <li class="li score"> <a href="#nogo" mce_href="#nogo" class="option"><span>积分计划</span></a> <ul> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">积分查询</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">积分兑换</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">积分明细查询</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">积分兑换话费</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">积分兑换历史查询</a></li> </ul> </li> <li class="li server"> <a href="#nogo" mce_href="#nogo" class="option"><span>在线客服</span></a> <ul> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">号码归属地查询</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">营业厅查询</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">手机仿真</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">在线咨询</a></li> </ul> </li> <li class="li edit"> <a href="#nogo" mce_href="#nogo" class="option"><span>个人信息管理</span></a> <ul> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">个人资料修改</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">服务密码变更</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">服务密码重置</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">PUK码查询</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">套餐使用状态查询</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">业务开通状态查询</a></li> </ul> </li> <li class="li sms"> <a href="#nogo" mce_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" mce_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" mce_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" mce_href="http://www.14px.com" title="Home" /> <title>三级级联菜单</title> <mce: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;} --></mce:style><style type="text/css" mce_bogus="1">* { 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"> <!--[if IE 6]><a class="li" href="#nogo" mce_href="#nogo"><table><tr><td><![endif]--> <a href="#nogo" mce_href="#nogo" class="option"><span>话费服务</span></a> <ul> <li class="li"> <!--[if IE 6]><a class="li" href="#nogo" mce_href="#nogo"><table><tr><td><![endif]--> <a href="#nogo" mce_href="#nogo" class="option"><span>话费查询</span></a> <ul> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">实时话费查询</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">话费余额查询</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">月账单查询</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">月详单查询</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">缴费历史查询</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">资费优选推荐</a></li> </ul> <!--[if IE 6]></td></tr></table></a><![endif]--> </li> <li class="li"> <!--[if IE 6]><a class="li" href="#nogo" mce_href="#nogo"><table><tr><td><![endif]--> <a href="#nogo" mce_href="#nogo" class="option"><span>定制话费信息</span></a> <ul> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">定制短信账单</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">话费余额短信提醒</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">定制Email账单</a></li> </ul> <!--[if IE 6]></td></tr></table></a><![endif]--> </li> <li class="li"> <!--[if IE 6]><a class="li" href="#nogo" mce_href="#nogo"><table><tr><td><![endif]--> <a href="#nogo" mce_href="#nogo" class="option"><span>网上交费</span></a> <ul> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">网上缴费</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">充值卡缴费</a></li> </ul> <!--[if IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if IE 6]></td></tr></table></a><![endif]--> </li> <li class="li biz"> <!--[if IE 6]><a class="li" href="#nogo" mce_href="#nogo"><table><tr><td><![endif]--> <a href="#nogo" mce_href="#nogo" class="option"><span>业务办理</span></a> <ul> <li class="li"> <!--[if IE 6]><a class="li" href="#nogo" mce_href="#nogo"><table><tr><td><![endif]--> <a href="#nogo" mce_href="#nogo" class="option"><span>日常业务办理</span></a> <ul> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">来电显示</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">呼叫等待</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">呼叫转移</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">三方通话</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">来电提醒</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">呼叫保持</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">呼叫转移设置</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">主叫隐藏</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">彩铃</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">国内漫游</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">短信回执</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">12580综合信息</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">关爱一线通</a></li> </ul> <!--[if IE 6]></td></tr></table></a><![endif]--> </li> <li class="li"> <!--[if IE 6]><a class="li" href="#nogo" mce_href="#nogo"><table><tr><td><![endif]--> <a href="#nogo" mce_href="#nogo" class="option"><span>数据业务</span></a> <ul> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">手机上网</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">GPRS</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">飞信</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">手机报</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">无线音乐俱乐部</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">手机邮箱</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">号簿管家</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">WLAN业务</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">彩乐短信</a></li> </ul> <!--[if IE 6]></td></tr></table></a><![endif]--> </li> <li class="li"> <!--[if IE 6]><a class="li" href="#nogo" mce_href="#nogo"><table><tr><td><![endif]--> <a href="#nogo" mce_href="#nogo" class="option"><span>手机报停/报开</span></a> <ul> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">手机报停</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">手机复机</a></li> </ul> <!--[if IE 6]></td></tr></table></a><![endif]--> </li> <li class="li"> <a href="#nogo" mce_href="#nogo" class="option">梦网查询与退订</a> </li> </ul> <!--[if IE 6]></td></tr></table></a><![endif]--> </li> <li class="li change"> <!--[if IE 6]><a class="li" href="#nogo" mce_href="#nogo"><table><tr><td><![endif]--> <a href="#nogo" mce_href="#nogo" class="option"><span>套餐办理与变更</span></a> <ul> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">GPRS套餐变更</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">产品变更</a></li> </ul> <!--[if IE 6]></td></tr></table></a><![endif]--> </li> <li class="li score"> <!--[if IE 6]><a class="li" href="#nogo" mce_href="#nogo"><table><tr><td><![endif]--> <a href="#nogo" mce_href="#nogo" class="option"><span>积分计划</span></a> <ul> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">积分查询</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">积分兑换</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">积分明细查询</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">积分兑换话费</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">积分兑换历史查询</a></li> </ul> <!--[if IE 6]></td></tr></table></a><![endif]--> </li> <li class="li server"> <!--[if IE 6]><a class="li" href="#nogo" mce_href="#nogo"><table><tr><td><![endif]--> <a href="#nogo" mce_href="#nogo" class="option"><span>在线客服</span></a> <ul> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">号码归属地查询</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">营业厅查询</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">手机仿真</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">在线咨询</a></li> </ul> <!--[if IE 6]></td></tr></table></a><![endif]--> </li> <li class="li edit"> <!--[if IE 6]><a class="li" href="#nogo" mce_href="#nogo"><table><tr><td><![endif]--> <a href="#nogo" mce_href="#nogo" class="option"><span>个人信息管理</span></a> <ul> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">个人资料修改</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">服务密码变更</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">服务密码重置</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">PUK码查询</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">套餐使用状态查询</a></li> <li class="li"><a href="#nogo" mce_href="#nogo" class="option">业务开通状态查询</a></li> </ul> <!--[if IE 6]></td></tr></table></a><![endif]--> </li> <li class="li sms"> <a href="#nogo" mce_href="#nogo" class="option">短信息服务</a> </li> </ul> </div> </body> </html>
经典论坛交流:
http://bbs.blueidea.com/thread-2929096-1-1.html
本文链接:http://www.blueidea.com/tech/web/2009/6777.asp
全兼容的纯CSS级联导航菜单源码相关推荐
- html5响应式导航条,10个响应式设计的导航菜单源码-附教程
10个响应式设计的导航菜单源码-附教程 Sponsor 在2013年里,响应式Web设计将会开始普及,我们应该学习这些新技术,尤其作为网页设计师和前端开发人员,学习CSS3样式表和HTML5是必不可少 ...
- 弹性小球flash导航菜单源码
弹性小球flash导航菜单源码,弹性小球,弹性flash素材,导航源码,fla源文件. 源文件下载http://www.huiyi8.com/sc/5873.html*(转载请注明来源)
- 全兼容的纯CSS级联菜单要点浅析
参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 操作系统:Windows 蓝色理想经典论坛首发,转载请注明出处 这次给项目做的级联菜单使用 ...
- 全兼容的纯CSS级联菜单
参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 操作系统:Windows 蓝色理想经典论坛首发,转载请注明出处 这次给项目做的级联菜单使用 ...
- 纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器)
原文:纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器) 虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul ...
- html列表太多转为下滑菜单,利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单...
利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单 以往文章里面讲了使用CSS的position属性定位结合display制作下拉弹出菜单,名为<纯CSS制作下拉导航菜单> ...
- css制作动态按钮导航栏,巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
- web中用纯CSS实现筛选菜单
web中用纯CSS实现筛选菜单 本文我们来用纯css实现像淘宝宝贝筛选菜单那样的效果,例子虽然没有淘宝那样强大,不过原理差不多,如果花点心思也可以实现和淘宝一样的. 内容过滤是一个在Web上常见的一个 ...
- 【荐】CSS多级导航菜单
代码简介: CSS导航菜单,三级菜单,资源完整,超实用,希望大家喜欢. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
最新文章
- Apollo 你了解下这些内容就完美了
- 在离线环境中安装Visual Stuido 2017
- 即将消失的十大热门技术---竟然有java,还是学asp.net去吧.跟微软混没错!
- Linux 下Oracle Client JAVA JDBC 集成点滴
- JavaScript中window对象属性,时间等的总结
- 如何获取android源码
- 只讲技术,拒绝空谈!2018 AI 开发者大会精彩议程曝光
- xilinx sdk文本编辑器显示行数
- 互联网盈利模式研习笔记之一:流量变现
- webview android%3e28,Android WebView 文明踩坑之路
- 在线点餐系统的测试用例
- 一个学生成绩管理系统c语言,一个学生成绩管理系统C语言源代码
- [转载].NET Core使用NPOI导出复杂,美观的Excel详解
- 阿里云获取手机验证码
- 短信发送显示服务器失败,手机短信发不出去怎么办 手机故障解决方法【方法步骤】...
- ct与x光的哪个辐射大_X光和CT,哪个辐射大?这些数字,医生可能并没告诉你
- MD5在文件中的使用
- 开源数字绘图工具Krita 2.8发布
- 在日本转职需要到入管办理转职手续
- 怎么定位门面位置_如何选择店面位置
热门文章
- 巴菲特再捐36亿美元,还说:赚钱的脑袋很重要
- 【移动支付】.NET支付宝App支付接入
- upper_bound()函数的使用
- OpenOCD应用之J-Link
- 解读10x程序员工作法-以终为始
- 自协商SGMII_IP核例化篇
- 这些题目,据说只有程序员才懂得答案?
- 论文查重系统可以检测哪几种语言?
- 解决! 华为鸿蒙安装Google Play,GMS三件套,设备未获得Play保护机制认证。(越过谷歌play保护机制认证,解除Google play保护机制弹窗)
- 16 | 数据库安全:数据库中的数据是如何被黑客拖取的?