網址導航CSS下拉多列選單

發表留言 人氣: 3140°c

今天看見163的下拉選單能夠多列排序,與傳統的下拉式選單非常之不同,

而且只使用了CSS+DIV簡結代碼做出來非常實用,如果有需要的你不要錯過…!

演示效果︰

CSS 碼︰
.layout {width:960px;margin:0 auto;position:relative}
.nav {background:#b91313;height:40px;clear:both;position:relative;z-index:100}
.nav li {float:left;padding-top:12px;height:28px;position:relative}
.nav .layout li a {font-size:14px;height:16px;line-height:16px;padding:0 29px 0 30px;color:#fff;border-right:1px #cd5a5a solid;}
.nav .layout li a:hover {color:#fff;}
.nav .layout #active {background:#970000}
.nav .layout #active a {color:#fff;font-size:bold;border:none;zoom:1;}
.nav .layout li.current a {background:#fff;font-weight:bold;color:#000;padding:10px 27px 11px 28px;padding:10px 27px 13px 28px\9;margin-top:-11px;zoom:1}
.nav .layout li.current a:hover {background:#fff;color:#000;text-decoration:none;}
.nav .layout li.other a:hover {padding:10px 27px 8px 28px;padding:10px 27px 10px 28px\9;_padding:10px 27px 12px 28px\9;}
.nav .layout #active a:hover {background:#970000;font-weight:500;padding:10px 29px 10px 30px;padding:10px 29px 10px 30px\9;margin:0;margin-top:-10px\9;}
.nav .layout li .snav {position:absolute;background:#fff;border:#b91313 2px solid;width:500px;border-top:none 0;top:40px;left:-2px;padding:10px 0px;display:none;overflow:hidden;}
.nav .layout li.current .snav {display:block}
.nav .layout li .snav dl {padding:0px 0 10px;}
.nav .layout li .snav dt {font-weight:bold;padding:5px 0;}
.nav .layout li .snav p {border-bottom:#bebebe 1px dotted;line-height:20px;padding:5px 0 5px 80px;position:relative;overflow:hidden;zoom:1;}
.nav .layout li .snav p:hover {background:#f2f2f2}
.nav .layout li .snav strong {display:inline-block;width:80px;padding-left:10px;height:20px;line-height:20px;position:absolute;margin-left:-70px;}
.nav .layout li .snav p a {font-size:12px;font-weight:500;line-height:20px;height:20px;color:#686868;text-align:left;padding:0;margin:0;border:0 none;display:inline-block;width:82px;background:none;overflow:hidden;}
.nav .layout li.current .snav a:hover {text-decoration:underline;background:none;color:#aa2e44}
.nav .layout li .tuan p a {width:60px;}
.nav .layout li .snav p.hot a {width:auto;margin-right:10px;}

HTML 碼︰
<div class="nav">
<!-- 主導航開始 -->
<div class="layout">
<ul>
<li id="active" ><a href="/">首頁</a></li>
<li onmousemove='this.className="current"' onmouseout='this.className=""'>
<a href="http://caipiao.163.com" target="_blank">網易彩票</a>
<div class="snav">
<p class="hot"><strong>最新</strong><a href="http://notice.caipiao.163.com/11/0810/10/7B3E7QBU00754ITT.html" target="_blank">注冊未滿一個月即中大獎</a><a href="http://caipiao.163.com/order/preBet_kl8.html" target="_blank">快樂8</a></p>
<p><strong>福彩</strong><a href="http://caipiao.163.com/order/preBet_ssq.html" target="_blank">雙色球</a><a href="http://caipiao.163.com/order/preBet_x3d.html" target="_blank">3D</a><a href="http://caipiao.163.com/order/preBet_qlc.html" target="_blank">七樂彩</a></p>
<p><strong>體彩</strong><a href="http://caipiao.163.com/order/preBet_pl3.html" target="_blank">排列三</a><a href="http://caipiao.163.com/order/preBet_pl5.html" target="_blank">排列五</a><a href="http://caipiao.163.com/order/preBet_qxc.html" target="_blank">七星彩</a><a href="http://caipiao.163.com/order/preBet_dlt.html" target="_blank">超級大樂透</a></p>
<p><strong>高頻彩</strong><a href="http://caipiao.163.com/order/preBet_jxssc.html" target="_blank">江西時時彩</a><a href="http://caipiao.163.com/order/preBet_ssc.html" target="_blank">重慶時時彩</a><a href="http://caipiao.163.com/order/preBet_d11.html" target="_blank">十一運奪金</a><a href="http://caipiao.163.com/order/preBet_kl8.html" target="_blank">快樂8</a></p>
<p><strong>足彩</strong><a href="http://caipiao.163.com/order/preBet_sfc.html" target="_blank">勝負彩</a><a href="http://caipiao.163.com/order/preBet_rx9.html" target="_blank">任選九</a><a href="http://caipiao.163.com/order/preBet_dcspf.html" target="_blank">單場勝平負</a></p>
<p><strong>大獎</strong><a href="http://caipiao.163.com/order/preBet_ssq.html" target="_blank">雙色球</a><a href="http://caipiao.163.com/order/preBet_dlt.html" target="_blank">超級大樂透</a><a href="http://caipiao.163.com/order/preBet_sfc.html" target="_blank">勝負彩</a><a href="http://caipiao.163.com/order/preBet_qxc.html" target="_blank">七星彩</a><a href="http://caipiao.163.com/order/preBet_qlc.html" target="_blank">七樂彩</a></p>
<p><strong>返獎率</strong><a href="http://caipiao.163.com/order/preBet_dcspf.html" target="_blank">單場勝平負</a><a href="http://caipiao.163.com/order/preBet_sfc.html" target="_blank">勝負彩</a><a href="http://caipiao.163.com/order/preBet_rx9.html" target="_blank">任選九</a><a href="http://caipiao.163.com/order/preBet_d11.html" target="_blank">十一運奪金</a><a href="http://caipiao.163.com/order/preBet_ssc.html" target="_blank">重慶時時彩</a></p>
<p class="bd_none hot"><strong>熱門</strong><a href="http://caipiao.163.com/mobile/main.jsp" target="_blank">手機彩票,積分翻倍</a><a href="http://zx.caipiao.163.com/" target="_blank">彩票資訊</a></p>
</div>
</li>
<li onmousemove='this.className="current other"' onmouseout='this.className=""'><a href="/game/queryGame.html">遊戲直充</a></li>
<li onmousemove='this.className="current other"' onmouseout='this.className=""'><a href="/mobile/fill.html">話費充值</a></li>
<li onmousemove='this.className="current"' onmouseout='this.className=""'>
<a href="http://baoxian.163.com" target="_blank">網易保險</a>
<div class="snav">
<p class="hot"><strong>最新</strong><a href="http://baoxian.163.com/?from=mallz1" target="_blank">網易車險業務上線啦!</a></p>
<p><strong>車險</strong><a href="http://baoxian.163.com/car/pingan.html?from=mallc1" target="_blank">平安車險</a><a href="http://bx.163.com/car/yangguang.html?from=mallc2" target="_blank">陽光車險</a><a href="http://bx.163.com/car/taipingyang.html?from=mallc3" target="_blank">太平洋車險</a></p>
<p class="bd_none hot"><strong>熱門</strong><a href="http://baoxian.163.com/?from=mallh1" target="_blank">品牌直銷多省15%</a><a href="http://baoxian.163.com/?from=mallh2" target="_blank">買就送免費救援</a></p>
</div>
</li>
<li onmousemove='this.className="current"' onmouseout='this.className=""'>
<a href="http://tuan.163.com" target="_blank">網易團長</a>
<div class="snav tuan" style="left:auto;right:-2px">
<p><strong>美食</strong><a href="http://tuan.163.com/tuan/details.do?tag=%E7%BE%8E%E9%A3%9F&subTag=%E4%B8%AD%E9%A4%90" target="_blank">中餐</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%BE%8E%E9%A3%9F&subTag=%E8%87%AA%E5%8A%A9" target="_blank">自助</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%BE%8E%E9%A3%9F&subTag=%E7%81%AB%E9%94%85" target="_blank">火鍋</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%BE%8E%E9%A3%9F&subTag=%E7%83%A7%E7%83%A4" target="_blank">燒烤</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%BE%8E%E9%A3%9F&subTag=%E6%B5%B7%E9%B2%9C" target="_blank">海鮮</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%BE%8E%E9%A3%9F&subTag=%E8%A5%BF%E9%A4%90" target="_blank">西餐</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%BE%8E%E9%A3%9F&subTag=%E6%97%A5%E9%9F%A9%E6%96%99%E7%90%86" target="_blank">日韓料理</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%BE%8E%E9%A3%9F&subTag=%E5%BF%AB%E9%A4%90" target="_blank">快餐</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%BE%8E%E9%A3%9F&subTag=%E7%94%9C%E5%93%81" target="_blank">甜品</a></p>
<p><strong>娛樂</strong><a href="http://tuan.163.com/tuan/details.do?tag=%E5%A8%B1%E4%B9%90&subTag=%E7%94%B5%E5%BD%B1" target="_blank">電影</a><a href="http://tuan.163.com/tuan/details.do?tag=%E5%A8%B1%E4%B9%90&subTag=KTV" target="_blank">KTV</a><a href="http://tuan.163.com/tuan/details.do?tag=%E5%A8%B1%E4%B9%90&subTag=%E6%97%85%E6%B8%B8" target="_blank">旅遊</a><a href="http://tuan.163.com/tuan/details.do?tag=%E5%A8%B1%E4%B9%90&subTag=%E9%83%8A%E6%B8%B8" target="_blank">郊遊</a><a href="http://tuan.163.com/tuan/details.do?tag=%E5%A8%B1%E4%B9%90&subTag=%E9%85%92%E5%90%A7" target="_blank">酒吧</a><a href="http://tuan.163.com/tuan/details.do?tag=%E5%A8%B1%E4%B9%90&subTag=%E8%AF%9D%E5%89%A7" target="_blank">話劇</a><a href="http://tuan.163.com/tuan/details.do?tag=%E5%A8%B1%E4%B9%90&subTag=%E6%BC%94%E5%87%BA" target="_blank">演出</a><a href="http://tuan.163.com/tuan/details.do?tag=%E5%A8%B1%E4%B9%90&subTag=%E8%BF%90%E5%8A%A8%E5%81%A5%E8%BA%AB" target="_blank">運動健身</a><a href="http://tuan.163.com/tuan/details.do?tag=%E5%A8%B1%E4%B9%90&subTag=%E6%B5%B7%E5%BA%95%E4%B8%96%E7%95%8C" target="_blank">海底世界</a><a href="http://tuan.163.com/tuan/details.do?tag=%E5%A8%B1%E4%B9%90&subTag=%E7%9B%B8%E5%A3%B0" target="_blank">相聲</a><a href="http://tuan.163.com/tuan/details.do?tag=%E5%A8%B1%E4%B9%90&subTag=%E7%91%9C%E4%BC%BD" target="_blank">瑜伽</a><a href="http://tuan.163.com/tuan/details.do?tag=%E5%A8%B1%E4%B9%90&subTag=%E6%B8%A9%E6%B3%89" target="_blank">溫泉</a><a href="http://tuan.163.com/tuan/details.do?tag=%E5%A8%B1%E4%B9%90&subTag=%E8%B6%B3%E7%96%97" target="_blank">足療</a><a href="http://tuan.163.com/tuan/details.do?tag=%E5%A8%B1%E4%B9%90&subTag=%E5%8F%B0%E7%90%83" target="_blank">台球</a><a href="http://tuan.163.com/tuan/details.do?tag=%E5%A8%B1%E4%B9%90&subTag=%E7%94%B5%E7%8E%A9" target="_blank">電玩</a><a href="http://tuan.163.com/tuan/details.do?tag=%E5%A8%B1%E4%B9%90&subTag=%E9%99%B6%E8%89%BA" target="_blank">陶藝</a><a href="http://tuan.163.com/tuan/details.do?tag=%E5%A8%B1%E4%B9%90&subTag=%E5%8A%A8%E7%89%A9%E5%9B%AD" target="_blank">動物園</a><a href="http://tuan.163.com/tuan/details.do?tag=%E5%A8%B1%E4%B9%90&subTag=%E6%B8%B8%E4%B9%90%E5%9B%AD" target="_blank">遊樂園</a><a href="http://tuan.163.com/tuan/details.do?tag=%E5%A8%B1%E4%B9%90&subTag=%E5%AC%89%E6%B0%B4" target="_blank">嬉水</a></p>
<p><strong>生活</strong><a href="http://tuan.163.com/tuan/details.do?tag=%E7%94%9F%E6%B4%BB&subTag=%E7%BE%8E%E5%AE%B9" target="_blank">美容</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%94%9F%E6%B4%BB&subTag=%E7%BE%8E%E5%8F%91" target="_blank">美發</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%94%9F%E6%B4%BB&subTag=%E7%98%A6%E8%BA%AB" target="_blank">瘦身</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%94%9F%E6%B4%BB&subTag=%E5%A9%9A%E7%BA%B1" target="_blank">婚紗</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%94%9F%E6%B4%BB&subTag=%E5%86%99%E7%9C%9F" target="_blank">寫真</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%94%9F%E6%B4%BB&subTag=%E9%85%92%E5%BA%97" target="_blank">酒店</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%94%9F%E6%B4%BB&subTag=%E7%BE%8E%E7%94%B2" target="_blank">美甲</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%94%9F%E6%B4%BB&subTag=%E4%BD%93%E6%A3%80" target="_blank">體檢</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%94%9F%E6%B4%BB&subTag=%E7%89%99%E7%A7%91" target="_blank">牙科</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%94%9F%E6%B4%BB&subTag=%E6%95%99%E8%82%B2%E5%9F%B9%E8%AE%AD" target="_blank">教育培訓</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%94%9F%E6%B4%BB&subTag=%E6%B1%BD%E8%BD%A6%E6%9C%8D%E5%8A%A1" target="_blank">汽車服務</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%94%9F%E6%B4%BB&subTag=%E5%AE%A0%E7%89%A9%E6%8A%A4%E7%90%86" target="_blank">寵物護理</a></p>
<p><strong>網購</strong><a href="http://tuan.163.com/tuan/details.do?tag=%E7%BD%91%E8%B4%AD&subTag=%E9%A3%9F%E5%93%81%E8%8C%B6%E9%85%92" target="_blank">食品茶酒</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%BD%91%E8%B4%AD&subTag=%E5%8C%96%E5%A6%86%E5%93%81" target="_blank">化妝品</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%BD%91%E8%B4%AD&subTag=%E6%9C%8D%E8%A3%85%E9%9E%8B%E5%B8%BD" target="_blank">服裝鞋帽</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%BD%91%E8%B4%AD&subTag=%E7%AE%B1%E5%8C%85" target="_blank">箱包</a><a href=" http://tuan.163.com/tuan/details.do?tag=%E7%BD%91%E8%B4%AD&subTag=%E9%A5%B0%E5%93%81" target="_blank">飾品</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%BD%91%E8%B4%AD&subTag=%E6%95%B0%E7%A0%81" target="_blank">數碼</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%BD%91%E8%B4%AD&subTag=%E6%AF%8D%E5%A9%B4%E5%84%BF%E7%AB%A5" target="_blank">母嬰兒童</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%BD%91%E8%B4%AD&subTag=%E5%AE%B6%E7%94%B5" target="_blank">家電</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%BD%91%E8%B4%AD&subTag=%E5%9B%BE%E4%B9%A6%E9%9F%B3%E5%83%8F" target="_blank">圖書音像</a><a href="http://tuan.163.com/tuan/details.do?tag=%E7%BD%91%E8%B4%AD&subTag=%E5%88%B8%E7%B1%BB" target="_blank">券類</a></p>
</div>
</li>
<li onmousemove='this.className="current"' onmouseout='this.className=""'>
<a href="http://yxp.163.com" class="bd_none" target="_blank">網易印像派</a>
<div class="snav" style="left:auto;right:-2px">
<p class="hot"><strong>最新</strong><a href="http://yxp.163.com/store/photobook/ep.html?sss=fromshop163dh#s=5" target="_blank">輕照片書</a><a href="http://yxp.163.com/store/homephoto/ep.html?sss=fromshop163dh #s=2" target="_blank">無框畫</a><a href="http://yxp.163.com/designer/store/?pt=10920&cp=250" target="_blank">玩味T恤</a><a href="http://yxp.163.com/designer/?sss=fromshop163dh" target="_blank">設計師潮品</a></p>
<p><strong>精品推薦</strong><a href="http://yxp.163.com/photo/ep.html?sss=fromshop163dh" target="_blank">照片沖印</a><a href="http://yxp.163.com/store/calendar/ep.html?sss=fromshop163dh" target="_blank">2012照片台曆</a><a href="http://yxp.163.com/store/photobook/ep.html?sss=fromshop163dh#s=0" target="_blank">照片書定制</a><a href="http://yxp.163.com/store/silver/ep.html?sss=fromshop163dh#s=1" target="_blank">純銀項鏈</a></p>
<p><strong>影集定制</strong><a href="http://yxp.163.com/store/pvcphotobook/ep.html?sss=fromshop163dh#s=0" target="_blank">精裝照片書</a><a href="http://yxp.163.com/store/photobook/ep.html?sss=fromshop163dh#s=0" target="_blank">簡裝照片書</a><a href="http://yxp.163.com/store/album/ep.html?sss=fromshop163dh#s=0&m=0" target="_blank">精品畫冊</a><a href="http://yxp.163.com/store/dalbum/ep.html?sss=fromshop163dh" target="_blank">桌面相冊</a></p>
<p><strong>純銀飾品</strong><a href="http://yxp.163.com/store/silver/ep.html?sss=fromshop163dh#s=1" target="_blank">時尚項鏈</a><a href="http://yxp.163.com/store/silver/ep.html?sss=fromshop163dh#s=2" target="_blank">精品戒指</a><a href="http://yxp.163.com/store/silver/ep.html?sss=fromshop163dh#s=3" target="_blank">手?手鏈</a><a href="http://yxp.163.com/store/silver/ep.html?sss=fromshop163dh#s=4" target="_blank">流行腳鏈</a></p>
<p><strong>家裝畫飾</strong><a href="http://yxp.163.com/store/homephoto/ep.html?sss=fromshop163dh#s=2" target="_blank">無框畫</a><a href="http://yxp.163.com/store/homephoto/ep.html?sss=fromshop163dh#s=1" target="_blank">木版畫</a><a href="http://yxp.163.com/store/homephoto/ep.html?sss=fromshop163dh#s=3" target="_blank">實木照片牆</a></p>
<p><strong>生活家居</strong><a href="http://yxp.163.com/store/pillow/ep.html?sss=fromshop163dh#s=0" target="_blank">時尚抱枕</a><a href="http://yxp.163.com/store/ep.html?sss=fromshop163dh#m=10&s=1" target="_blank">馬克杯</a><a href="http://yxp.163.com/store/ep.html?sss=fromshop163dh#m=10&s=2" target="_blank">魔術杯</a> <a href="http://yxp.163.com/store/ep.html?sss=fromshop163dh#m=10&s=3" target="_blank">骨瓷杯</a><a href="http://yxp.163.com/store/ep.html?sss=fromshop163dh#m=10&s=4" target="_blank">情侶杯</a></p>
<p><strong>台曆挂曆</strong><a href="http://yxp.163.com/store/calendar/ep.html?sss=fromshop163dh#s=1" target="_blank">小巧台曆</a><a href="http://yxp.163.com/store/calendar/ep.html?sss=fromshop163dh#s=2" target="_blank">8寸橫款台曆</a><a href="http://yxp.163.com/store/calendar/ep.html?sss=fromshop163dh#s=3" target="_blank">8寸豎款台曆</a><a href="http://yxp.163.com/store/wallcal/ep.html?sss=fromshop163dh#s=0" target="_blank">新年挂曆</a><a href="http://yxp.163.com/store/spcal/ep.html?sss=fromshop163dh" target="_blank">海報年曆</a></p>
<p><strong>創意玩意</strong><a href="http://yxp.163.com/store/lomocard/ep.html?sss=fromshop163dh" target="_blank">LOMO卡片</a><a href="http://yxp.163.com/store/ep.html#m=9" target="_blank">鼠標墊</a><a href="http://yxp.163.com/store/ep.html?sss=fromshop163dh#m=6" target="_blank">筆記本</a><a href="http://yxp.163.com/store/ep.html#m=5" target="_blank">貼貼紙</a><a href="http://yxp.163.com/store/gcard/ep.html" target="_blank">賀卡</a></p>
<p class="bd_none hot"><strong>熱門</strong><a href="http://yxp.163.com/action/ep.html?sss=fromshop163dh" target="_blank">促銷信息</a><a href="http://yxp.163.com/vpshop/?sss=fromshop163dh" target="_blank">積分兌獎</a><a href="http://yxp.163.com/theme/ep.html?sss=fromshop163dh" target="_blank">給力主題</a></p>
</div>
</li>
</ul>
</div>
<!--主導航結束-->
</div>

默認選單的顏色是"紅色“,請自行修改顏色碼"#b91313

色碼表網站︰ http://www.ifreesite.com/color.htm

代碼測試工具︰
http://www.ifreesite.com/runcode.htm

標籤: