純css寫的3級導航菜單

07-24

<!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><title>中國站長天空-網頁特效-導航菜單-兼容各種瀏覽器的純CSS三級導航菜單</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><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(http://www.zzsky.cn/effect/images/201010250115_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.zzsky.cn/effect/images/201010250115_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>
推薦閱讀：

※使用jQuery創建簡單的手風琴菜單
※8~9月齡寶寶每日輔食菜單 & 餵養要點
※教你看懂日料菜單
※超驚人的逆生長菜單，至少年輕10歲

TAG:導航 | 菜單 |