人氣 7859°c

網址導航CSS下拉多列選單

今天看見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"> 最新<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> 福彩<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> 體彩<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> 高頻彩<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> 足彩<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> 大獎<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> 返獎率<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> 熱門<a href="http://caipiao.163.com/mobile/main.jsp" target="_blank">手機彩票，積分翻倍</a><a href="http://zx.caipiao.163.com/" target="_blank">彩票資訊</a> </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"> 最新<a href="http://baoxian.163.com/?from=mallz1" target="_blank">網易車險業務上線啦！</a> 車險<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> 熱門<a href="http://baoxian.163.com/?from=mallh1" target="_blank">品牌直銷多省15%</a><a href="http://baoxian.163.com/?from=mallh2" target="_blank">買就送免費救援</a> </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"> 美食<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> 娛樂<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> 生活<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> 網購<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> </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"> 最新<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> 精品推薦<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> 影集定制<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> 純銀飾品<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> 家裝畫飾<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> 生活家居<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> 台曆挂曆<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> 創意玩意<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> 熱門<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> </div> </li> </ul> </div>  </div>
默認選單的顏色是"紅色"，請自行修改顏色碼"#b91313"

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

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

標籤：CSS 日期：2 月, 2013

文章短址：

月光部落

網址導航CSS下拉多列選單

作者︰JACK