网易商城CSS下拉菜单导航 [收藏]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>网易商城CSS下拉菜单导航</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE>.nav {
	CLEAR: both; Z-INDEX: 10; BACKGROUND: #b91313; MARGIN-LEFT: 40px; WIDTH: 800px; POSITION: relative; HEIGHT: 40px
}
.nav LI {
	FLOAT: left; PADDING-TOP: 13px; LIST-STYLE-TYPE: none; POSITION: relative; HEIGHT: 27px
}
.nav .layout LI A {
	BORDER-RIGHT: #cd5a5a 1px solid; PADDING-RIGHT: 29px; PADDING-LEFT: 30px; FONT-SIZE: 14px; PADDING-BOTTOM: 0px; COLOR: #fff; LINE-HEIGHT: 16px; PADDING-TOP: 0px; HEIGHT: 16px
}
.nav .layout LI A:hover {
	COLOR: #fff
}
.nav .layout #active {
	BACKGROUND: #970000
}
.nav .layout #active A {
	BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; COLOR: #fff; BORDER-BOTTOM: medium none; ZOOM: 1
}
.nav .layout LI.current A {
	PADDING-RIGHT: 27px; MARGIN-TOP: -11px; PADDING-LEFT: 28px; FONT-WEIGHT: bold; BACKGROUND: #fff; PADDING-BOTTOM: 12px; COLOR: #000; PADDING-TOP: 10px; ZOOM: 1
}
.nav .layout LI.current A:hover {
	BACKGROUND: #fff; COLOR: #000; TEXT-DECORATION: none
}
.nav .layout LI.other A:hover {
	PADDING-RIGHT: 27px; PADDING-LEFT: 28px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px
}
.nav .layout #active A:hover {
	PADDING-RIGHT: 29px; PADDING-LEFT: 30px; FONT-WEIGHT: 500; BACKGROUND: #970000; PADDING-BOTTOM: 10px; MARGIN: -10px 0px 0px; PADDING-TOP: 10px
}
.nav .layout LI .snav {
	BORDER-TOP-WIDTH: 0px; BORDER-RIGHT: #b91313 2px solid; PADDING-RIGHT: 0px; DISPLAY: none; PADDING-LEFT: 0px; FONT-SIZE: 12px; BACKGROUND: #fff; LEFT: -2px; PADDING-BOTTOM: 10px; OVERFLOW: hidden; BORDER-LEFT: #b91313 2px solid; WIDTH: 480px; PADDING-TOP: 0px; BORDER-BOTTOM: #b91313 2px solid; POSITION: absolute; TOP: 40px
}
.nav .layout LI.current .snav {
	DISPLAY: block
}
.nav .layout LI .snav DL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; PADDING-TOP: 0px
}
.nav .layout LI .snav DT {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; PADDING-BOTTOM: 5px; PADDING-TOP: 5px
}
.nav .layout LI .snav P {
	PADDING-LEFT: 80px; MARGIN: 0px; OVERFLOW: hidden; LINE-HEIGHT: 30px; BORDER-BOTTOM: #bebebe 1px dotted; ZOOM: 1; POSITION: relative
}
.nav .layout LI .snav P:hover {
	BACKGROUND: #f2f2f2
}
.nav .layout LI .snav STRONG {
	DISPLAY: inline-block; PADDING-LEFT: 10px; MARGIN-LEFT: -80px; WIDTH: 80px; LINE-HEIGHT: 30px; POSITION: absolute; HEIGHT: 30px
}
.nav .layout LI .snav P A {
	BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; DISPLAY: inline-block; PADDING-LEFT: 0px; FONT-WEIGHT: 500; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 12px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; WIDTH: 82px; COLOR: #686868; LINE-HEIGHT: 30px; PADDING-TOP: 0px; HEIGHT: 30px; TEXT-ALIGN: left; BORDER-RIGHT-WIDTH: 0px
}
.nav .layout LI.current .snav A:hover {
	BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #aa2e44; TEXT-DECORATION: underline
}
.nav .layout LI .tuan P {
	PADDING-LEFT: 50px; ZOOM: 1
}
.nav .layout LI .tuan STRONG {
	MARGIN-LEFT: -50px; WIDTH: 50px
}
.nav .layout LI .tuan P A {
	WIDTH: 60px
}
.nav .layout LI .snav P.hot A {
	WIDTH: auto; MARGIN-RIGHT: 10px
}
H1 {
	PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 18px; BACKGROUND: #f1f1f1; PADDING-BOTTOM: 10px; PADDING-TOP: 10px
}
#vimei {
	CLEAR: both; FONT-SIZE: 14px
}
</STYLE>

<META content="MSHTML 6.00.2900.6129" name=GENERATOR></HEAD>
<BODY>
<H1>网易商城CSS下拉菜单导航</H1>
<DIV class=nav><!-- 主导航开始 -->
<DIV class=layout>
<UL>
  <LI οnmοusemοve='this.className="current other"' 
  οnmοuseοut='this.className=""'><A href="http://mall.163.com/">首页</A> </LI>
  <LI οnmοusemοve='this.className="current other"' id=active 
  οnmοuseοut='this.className=""'><A 
  href="http://mall.163.com/mobile/fill.jsp">话费充值</A> </LI>
  <LI οnmοusemοve='this.className="current"' οnmοuseοut='this.className=""'><A 
  href="http://l.163.com/" target=_blank>网易尚品</A> 
  <DIV class=snav>
  <P class=hot><STRONG>最新</STRONG><A 
  href="http://caipiao.163.com/activity/icbcactivity.jsp" 
  target=_blank>工行活动</A><A href="http://l.163.com/brand/10.html" 
  target=_blank>GUCCI新款</A><A href="http://l.163.com/brand/6.html" 
  target=_blank>LV新款</A><A href="http://l.163.com/brand/14.html" 
  target=_blank>PARAD新款</A></P>
  <P><STRONG>手袋皮具</STRONG><A href="http://l.163.com/goods/type/12.html" 
  target=_blank>女包手袋</A><A href="http://l.163.com/goods/type/13.html" 
  target=_blank>男士箱包</A><A href="http://l.163.com/goods/type/14.html" 
  target=_blank>功能包袋</A><A href="http://l.163.com/goods/type/15.html" 
  target=_blank>皮带腰带</A><A href="http://l.163.com/goods/type/16.html" 
  target=_blank>其他</A></P>
  <P><STRONG>手表</STRONG><A href="http://l.163.com/goods/type/23.html" 
  target=_blank>机械表</A><A href="http://l.163.com/goods/type/24.html" 
  target=_blank>石英表</A><A href="http://l.163.com/goods/type/29.html" 
  target=_blank>时尚手表</A><A href="http://l.163.com/goods/type/25.html" 
  target=_blank>其他</A></P>
  <P><STRONG>珠宝饰品</STRONG><A href="http://l.163.com/goods/type/18.html" 
  target=_blank>时尚饰品</A><A href="http://l.163.com/goods/type/19.html" 
  target=_blank>户外用品</A><A href="http://l.163.com/goods/type/20.html" 
  target=_blank>工艺饰品</A><A href="http://l.163.com/goods/type/21.html" 
  target=_blank>其他</A></P>
  <P><STRONG>服装服饰</STRONG><A href="http://l.163.com/goods/type/2.html" 
  target=_blank>潮流女装</A><A href="http://l.163.com/goods/type/3.html" 
  target=_blank>时尚男装</A><A href="http://l.163.com/goods/type/4.html" 
  target=_blank>服装配饰</A><A href="http://l.163.com/goods/type/5.html" 
  target=_blank>其他</A></P>
  <P><STRONG>酒品</STRONG><A href="http://l.163.com/goods/type/34.html" 
  target=_blank>红葡萄酒</A><A href="http://l.163.com/goods/type/35.html" 
  target=_blank>白葡萄酒</A><A href="http://l.163.com/goods/type/38.html" 
  target=_blank>洋酒</A><A href="http://l.163.com/goods/type/39.html" 
  target=_blank>起泡酒</A><A href="http://l.163.com/goods/type/28.html" 
  target=_blank>其他红酒</A><A href="http://l.163.com/goods/type/40.html" 
  target=_blank>酒具</A></P>
  <P class="bd_none hot"><STRONG>热门</STRONG><A 
  href="http://l.163.com/goods/34980.html" target=_blank>爱马仕Evelyne</A><A 
  href="http://l.163.com/goods/34843.html" target=_blank>达利恩骑士</A><A 
  href="http://l.163.com/goods/34973.html" target=_blank>赛琳笑脸包</A><A 
  href="http://l.163.com/goods/type/27.html" target=_blank>酒品</A></P></DIV></LI>
  <LI οnmοusemοve='this.className="current"' οnmοuseοut='this.className=""'><A 
  class=bd_none href="http://yxp.163.com/" target=_blank>网易印象派</A> 
  <DIV class=snav style="RIGHT: -2px; LEFT: auto">
  <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><BR><BR>
</BODY></HTML>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值