淘宝导航栏CSS代码：鼠标滑过一级分类自动弹出子二级子分类 代码是什么？ 淘宝所有分类背景代码和鼠标移动上去时的代码，二级菜单背景需要...

\u6c42CSS\u4ee3\u7801\u3002\u60f3\u8981\u7684\u6548\u679c\u662f\u9f20\u6807\u5212\u8fc7\u83dc\u5355\u65f6\u5f39\u51fa\u7684\u4e8c\u7ea7\u83dc\u5355\u76f8\u5bf9\u8be5\u9009\u9879\u5c45\u4e2d\u663e\u793a\u3002\u4e0d\u8981\u5e38\u7528\u7684\u5de6\u5bf9\u9f50\u548c\u53f3\u5bf9\u9f50\u3002

body{background:#000;margin:0;padding:50px;position:}
ul,li,hr{margin:0;padding:0;float:left;list-style:none;}
a{font-size:12px;font-weight:normal;font-family:"\u5b8b\u4f53";color:#999;text-decoration:none;text-

align:center;}
a:hover{color:orange;}
#nav{height:32px;background:#eee;width:100%;}
#nav a,#nav a.hover{width:88px;height:32px;float:left;color:#444;font:12px;font-weight:bold;

font-family:tahoma;text-decoration:none;line-height:32px;text-align:center;display:block;

border-right:1px solid #f5f2f0;border-left:1px solid #e0e0e0;}
#nav a:hover,#nav a.hover{background:orange;color:#fff;}
hr{width:100%;height:0px;border:none;border-top:1px solid #fff;overflow:hidden;

font-size:1px;display:block;clear:both;line-height:1px;}
*html hr{margin-bottom:-14px;}
hr.h1{border-color:#777;}
hr.h2{border-color:#555;}
hr.h3{border-color:#333;}
#cbox{position:absolute;top:82px;left:50px;}
#cbox ul{width:150px;background:#333;position:absolute;display:none;}
#cbox ul li{display:block;}
#cbox ul a{width:150px;height:25px;line-height:25px;border-bottom:1px solid #222;display:block;}
#cbox ul a:hover,#cbox ul a.hover{background:#444;color:orange;}
#cbox ul.cb{width:120px;}
#cbox ul.cb li a{width:120px;height:27px;line-height:27px;font-weight:bold;}




\u7535\u5f71
\u5267\u96c6
\u52a8\u6f2b
\u7efc\u827a
\u6e38\u620f







\u65b0\u7247    >
\u9ad8\u6e05    >
\u5185\u5730    >
\u6e2f\u53f0    >
\u6b27\u7f8e    >
\u65e5\u97e9    >


\u6700\u65b0    >
\u5a31\u4e50    >
\u65b0\u95fb    >
\u665a\u4f1a    >
\u4f53\u80b2    >
\u79d1\u6559    >


\u6700\u65b0    >
\u7535\u89c6\u7248  >
\u5267\u573a\u7248  >
OVA     >
\u539f\u521b    >


\u300a\u5c06\u7231\u60c5\u8fdb\u884c\u5230\u5e95\u300b
\u300a\u6212\u70df\u4e0d\u6212\u9152\u300b
\u300a\u6731\u8389\u5a05\u7684\u773c\u775b\u300b
\u300a\u5bfb\u9f99\u593a\u5b9d\u300b


\u300a\u7231\u4f60\u4e00\u4e07\u5e74\u300b
\u300a\u4eba\u4f53\u8708\u86a3\u300b
\u300a\u4e00\u4e00\u300b


\u300a\u9738\u738b\u522b\u59ec\u300b
\u300a\u661f\u6708\u7ae5\u8bdd\u300b
\u300a\u6211\u77e5\u5973\u4eba\u5fc3\u300b
\u300a\u6b66\u6797\u5916\u4f20\u300b
\u300a\u98ce\u6708\u300b


\u300a\u524d\u5ea6\u300b
\u300a\u731b\u7537\u6eda\u6b7b\u961f\u300b
\u300a\u5931\u4e1a\u751f\u300b
\u300a\u5a5a\u524d\u8bd5\u7231\u300b


\u300a\u7f8e\u4eba\u8ba1\u300b
\u300a\u7eff\u91ce\u4ed9\u8e2a\u300b
\u300a\u4e5e\u529b\u9a6c\u624e\u7f57\u7684\u96ea\u300b
\u300a88\u5206\u949f\u300b
\u300a\u5170\u6208\u300b
\u300a\u76d7\u68a6\u7a7a\u95f4\u300b
\u300a\u673a\u68b0\u5e08\u300b


\u300a\u653b\u58f3\u673a\u52a8\u961f\u300b
\u300a\u5973\u6559\u6388\u7684\u9690\u79d8\u9b45\u529b\u300b
\u300a\u5929\u4f7f\u4e4b\u604b\u300b
\u300a\u5988\u5988\u8981\u51fa\u5ac1\u300b
\u300a\u544a\u767d\u300b


\u300a\u7f8e\u4eba\u5fc3\u8ba1\u300b
\u300a\u751f\u6d3b\u5927\u7206\u70b8\u300b
\u300a\u753b\u76ae\u300b
\u300a\u5b9e\u4e60\u533b\u751f\u683c\u857e\u300b
\u300a\u604b\u7231SOS\u300b


\u300a\u5bab\u9501\u5fc3\u7389\u300b
\u300a\u7231\u4f3c\u767e\u6c47\u300b
\u300a\u501f\u67aa\u300b


\u300a\u7231\u60c5\u516c\u5bd3\u300b\u7b2c\u4e00\u5b63
\u300a\u56de\u5bb6\u7684\u8bf1\u60d1\u300b
\u300a\u68a8\u82b1\u6cea\u300b
\u300a\u98ce\u58f0\u4f20\u5947\u300b
\u300a\u5973\u5a32\u4f20\u8bf4\u4e4b\u7075\u73e0\u300b


\u300a\u53ea\u6709\u60a8\u300b
\u300a\u7280\u5229\u4eba\u59bb\u300b
\u300a\u8c01\u5bb6\u7076\u5934\u65e0\u70df\u706b\u300b
\u300a\u5973\u62f3\u300b
\u300a\u680b\u7b03\u795e\u63a2\u300b
\u300a\u56fd\u6c11\u82f1\u96c4\u300b


\u300a\u5e7b\u4e16\u6d6e\u751f\u300b\u7b2c\u4e00\u5b63
\u300a\u751f\u6d3b\u5927\u7206\u70b8\u300b\u7b2c\u56db\u5b63
\u300a\u5b9e\u4e60\u533b\u751f\u683c\u857e\u300b\u7b2c\u4e03\u5b63
\u300a\u5438\u8840\u9b3c\u65e5\u8bb0\u300b\u7b2c\u4e8c\u5b63
\u300a\u5c3c\u57fa\u5854\u300b\u7b2c\u4e00\u5b63
\u300a\u7eef\u95fb\u5973\u5b69\u300b\u7b2c\u56db\u5b63
\u300a\u884c\u5c38\u8d70\u8089\u300b\u7b2c\u4e00\u5b63


\u300a\u5357\u74dc\u82b1\u7684\u7eaf\u60c5\u300b
\u300a\u6df1\u591c\u98df\u5802\u300b
\u300a\u6a31\u82b1\u5fc3\u4e2d\u300b
\u300a\u5929\u4f7f\u7684\u8bf1\u60d1\u300b
\u300a\u793a\u8c08\u4ea4\u6e09\u4eba\u300b
\u300a49\u65e5\u300b


\u300a\u94f6\u9b42\u300b\u7b2c\u4e8c\u5b63
\u300a\u53d8\u5f62\u91d1\u521a\uff1a\u9886\u8896\u300b
\u300a\u82b1\u5f00\u4f0a\u5415\u6ce2\u300b


\u300a\u65e5\u5e38\u300b
\u300aDOG\u300bDAYS
\u300a\u82b1\u5f00\u4f0a\u5415\u6ce2\u300b


\u300a\u7a7a\u4e4b\u5883\u754c\u300b\u6700\u7ec8\u7ae0
\u300a\u590f\u5a03\u7684\u65f6\u95f4\u300b
\u300a\u6211\u7684\u5973\u795e\u300b
\u300a\u7834\u5203\u4e4b\u5251\u300b\u7b2c\u56db\u7ae0
\u300a\u7237\u7237\u4e0e\u82b1\u300b


\u300a\u9ed1\u7901\u300b\u7b2c\u4e09\u5b63
\u300a\u6821\u56ed\u8ff7\u7cca\u5927\u738b\u300b
\u300a\u9ad8\u667a\u80fd\u65b9\u7a0b\u5f0fSin\u300b


\u300a\u7237\u7237\u4e0e\u82b1\u300b
\u300a\u5341\u5e74\u300b
\u300a37137\u300b
\u300a\u9b47\u300b
\u300a\u6211\u53ebMT\u300b






var last_pid=last_cid=pid=cid=0;
var a_h=parseInt($("#c1 a").css("height"))+1;
var a_w=parseInt($("#c1 a").css("width"));
var nav_w=parseInt($("#nav li").css("width"));
function showMenu(){
if(cid!=last_cid){
$("#c"+last_pid+"_"+last_cid).hide();
$("#c"+last_pid+" a").eq(last_cid-1).removeClass("hover");
if(cid){
$("#c"+pid+"_"+cid).css("top",(cid-1)*a_h).css("left",(pid-1)*nav_w+a_w-16+"px").show();
$("#c"+pid+" a").eq(cid-1).addClass("hover");
}
last_cid=cid;
}
if(pid!=last_pid){
$("#c"+last_pid).hide();
$("#nav a").eq(last_pid-1).removeClass("hover");
if(pid){
$("#c"+pid).css("left",(pid-1)*nav_w-16).slideDown();
$("#nav a").eq(pid-1).addClass("hover");
}
last_pid=pid;
}
}

$("#nav a").hover(function(){
pid=$("#nav a").index($(this))+1;
cid=0;
showMenu();
},function(){
pid=cid=0;
t=setTimeout("showMenu()",50);
});
$("#cbox").mouseover(function(e){
var obj=e.target;
if($(obj).attr("id")!="cbox"){
var ppobj=$(obj).parent().parent();
var index=ppobj.find("a").index($(obj));
var ppid=ppobj.attr("id");
var str=ppid.substring(1,ppid.length).split("_");
pid=str[0];
if(str.length==2){
cid=str[1];
}else{
cid=index+1;
}
showMenu();
}
}).mouseout(function(e){
var obj=e.target;
if($(obj).attr("id")!="cbox"){
pid=cid=0;
t=setTimeout("showMenu()",50);
}
});




\u539f\u6587\u94fe\u63a5:http://hi.baidu.com/lmj80/blog/item/ecea7dff3e750a0009244d3a.html

/*\u6240\u6709\u5206\u7c7b\u80cc\u666f\u8272*/
.all-cats .link{background: none repeat scroll 0 0 #00ad08;}

\u9f20\u6807\u6ed1\u8fc7\u4e00\u7ea7\u5206\u7c7b\u5bfc\u822a\u6587\u5b57\u53d8\u6362\u80cc\u666f\u8272\u4ee3\u7801\u5982\u4e0b\uff1a
.menu-list .menu-hover .link{background:#000000;}

\u9f20\u6807\u6ed1\u8fc7\u4e8c\u7ea7\u5206\u7c7b\u5bfc\u822a\u6587\u5b57\u53d8\u6362\u80cc\u666f\u8272\u4ee3\u7801\u5982\u4e0b\uff1a
.popup-content .cats-tree .cat-hd-hover{background:#000000;}
\u4e8c\u7ea7\u5206\u7c7b\u80cc\u666f\u4ee3\u7801\u5982\u4e0b\uff1a
.popup-content{background:#000000;}

A.\u7b80\u5355\u7684\u6dd8\u5b9d\u65b0\u65fa\u94fa\u81ea\u5b9a\u4e49CSS\u5bfc\u822a\u900f\u660e\u80cc\u666f\u4ee3\u7801\uff1a
\u3000\u3000.skin-box-bd{background:none;}
\u3000\u3000.menu-list{background:none;}.link{background:none;}
\u3000\u3000.menu{background:none;}
\u3000\u3000.all-cats{background:none;}
\u3000\u3000.all-cats{display:none;}
\u3000\u3000.menu-list.menu.title{color:#CF6AA6;}
\u3000\u3000B.\u5b8c\u5168\u7684\u6dd8\u5b9d\u65b0\u65fa\u94fa\u81ea\u5b9a\u4e49CSS\u5bfc\u822a\u900f\u660e\u80cc\u666f\u4ee3\u7801\uff1a
\u3000\u3000.skin-box-bd{background:none;border:none;}
\u3000\u3000.menu-list{background:none;}
\u3000\u3000.link{background:none;border:none;}
\u3000\u3000.menu{background:none;}
\u3000\u3000.all-cats{background:none;}
\u3000\u3000.skin-box-bd.all-cats.link{border:none;}
\u3000\u3000.skin-box-bd.menu-list.menu{border:none;}
\u3000\u3000.menu-list.menu.title{color:#000000;font-size:15px;font-weight:bold;}
\u3000\u3000.all-cats.link.title{color:#000000;font-size:15px;font-weight:bold;}
\u3000\u3000.skin-box-bd.menu-list.menu-selected.link{background:none;}
\u3000\u3000.skin-box-bd.menu-list.menu-selected.link.title{background:none;}
\u5e0c\u671b\u80fd\u5e2e\u5230\u4f60\uff0c\u671b\u91c7\u7eb3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
ul{ list-style:none;}
li{ float:left; display: block; width:100px; text-align:center; background:#f66; color:#fff; height:40px; line-height:40px; position:relative; cursor:pointer;}
ul li:hover{ background:#933;}
ul li:hover ul{ display:block;}
ul li ul{ height:120px; display:none; position:absolute; top:40px; left:0;}
ul li ul li{float:none; background:#444; height:40px;}
</style>
</head>

<body>
	<ul>
    	<li>1
        	<ul>
            	<li>1.1</li>
                <li>1.2</li>
                <li>1.3</li>
            </ul>
        </li>
        <li>1
        	<ul>
            	<li>1.1</li>
                <li>1.2</li>
                <li>1.3</li>
            </ul>
        </li>
        <li>1
        	<ul>
            	<li>1.1</li>
                <li>1.2</li>
                <li>1.3</li>
            </ul>
        </li>
    </ul>
</body>
</html>

<html>
<body>
<ul id="Nav" class="Nav">
<li><a class="nanbaofenlei" href="#">男包分类</a>
<ul>
<li><a href="#">腰腿包</a></li>
<li><a href="#">电脑包</a></li> //#号放对应你分类的包的链接
<li><a href="#">双肩包</a></li>
</ul>
</li>
<li><a href="#">特惠清仓</a></li>
</body>
</html>

<div id="divmain"><span>男包分类<span>
<div display="none">
<a>各种包</a>
<a>各种包</a>
<a>各种包</a>
</div>
</div>
然后当鼠标悬浮divmain的时候 出现。

娣樺疂瀵艰埅css浠ｇ爜
绛旓細.popup-content .cats-tree .snd-pop-inner{background:#000000;} 榧犳爣婊戣繃涓夌骇鍒嗙被瀵艰埅鏂囧瓧鍙樻崲鑳屾櫙鑹浠ｇ爜濡備笅锛.popup-content .cats-tree .snd-cat-hd-hover{background:#000000;} 鍦ㄤ笁绾у垎绫诲墠鍔犱笂灏忓潡鐧借壊浠ｇ爜濡備笅锛.popup-content .cats-tree .snd-cat-icon{display:block;height:3px;width:3...

娣樺疂鎵鏈夊垎绫昏儗鏅浠ｇ爜鍜榧犳爣绉诲姩涓婂幓鏃剁殑浠ｇ爜,浜岀骇鑿滃崟鑳屾櫙闇瑕佸仛鎴愬崐...
绛旓細榧犳爣婊戣繃涓绾у垎绫瀵艰埅鏂囧瓧鍙樻崲鑳屾櫙鑹浠ｇ爜濡備笅锛.menu-list .menu-hover .link{background:#000000;} 榧犳爣婊戣繃浜岀骇鍒嗙被瀵艰埅鏂囧瓧鍙樻崲鑳屾櫙鑹蹭唬鐮佸涓嬶細.popup-content .cats-tree .cat-hd-hover{background:#000000;} 浜岀骇鍒嗙被鑳屾櫙浠ｇ爜濡備笅锛.popup-content{background:#000000;} A.绠鍗曠殑娣樺疂鏂版椇閾鸿嚜瀹氫箟...

璋佹湁婕備寒鐨娣樺疂缃戝鑸鐨勬牱寮css浠ｇ爜
绛旓細11.涓绾瀵艰埅鈥滄墍鏈夊疂璐濃濆垎绫诲垎闅旂嚎棰滆壊浠ｇ爜濡備笅锛.all-cats .link{border-color:#000000;} 12.涓绾у鑸垎绫荤殑瀹藉害淇敼浠ｇ爜濡備笅锛.menu-list .menu{background:#棰滆壊;margin:0;padding:0px 澧炲姞鐨勫搴x;} 13.榧犳爣婊戣繃涓绾у垎绫诲鑸枃瀛楀彉鎹㈣儗鏅壊浠ｇ爜濡備笅锛.menu-list .menu-hover .link{backgroun...

娣樺疂瀵艰埅鏍廋SS浠ｇ爜:榧犳爣婊戣繃涓绾у垎绫昏嚜鍔ㄥ脊鍑哄瓙浜岀骇瀛愬垎绫 浠ｇ爜鏄粈涔...
绛旓細doctype html>鏃犳爣棰樻枃妗*{ margin:0; padding:0;}ul{ list-style:none;}li{ float:left; display: block; width:100px; text-align:center; background:#f66; color:#fff; height:40px; line-height:40px; position:relative; cursor:pointer;}ul li:hover{ background:#933;}ul li:hove...

娣樺疂鏃洪摵瑁呬慨瀵艰埅鏉宸︿晶涓嬫媺鑿滃崟濡備綍璁剧疆css浠ｇ爜
绛旓細绗竴姝ワ紝杩涘叆搴楅摵瑁呬慨鐐圭紪杈戯細绗簩姝ワ紝鐐规樉绀鸿缃細绗笁姝ワ紝灏嗘樉绀轰唬鐮佹斁杩涘幓锛岃繖涓槸鎴戜滑鍥㈤槦鐨浠ｇ爜锛绗洓锛屼緷鎮ㄧ殑鑳屾櫙棰滆壊鍜屾枃鏈彉绮楋紝浠ｇ爜濡備笅锛.all-cats .link{background:none repeat scroll 0 0 #FF0000;}.skin-box-bd .all-cats .title{font-size:12px;font-weight:bold;color:#000000...

...閫忔槑榧犳爣缁忚繃鏂囧瓧棰滆壊鍙樹负#949494鐏拌壊..鐨css浠ｇ爜!
绛旓細.nav{ background:transparent;} .nav:hover{ color:#949494;} 浣犳病鏈夊叿浣撳厓绱狅紝濡傛灉鍜屼綘鎯宠鐨勬湁鍋忓樊鍙互缁х画闂

娣樺疂瀵艰埅鏍廋SS浠ｇ爜
绛旓細棣栧厛鏄css锛a{ color: #000000} a:hover {color: #fff; background: #000; }鐒跺悗a鏍囩 鐐瑰嚮鎸夐挳杩欎簺鏄痑鏍囩鐨勪竴浜涙牱寮 a 鏍囩瀵规槸涓涓綉绔欑殑涓鏉淇℃伅閾炬帴瀹氫箟鐨勶紝a:link {} /* 鏈闂殑閾炬帴 */a:visited {} /* 宸茶闂殑閾炬帴 */a:hover {} /* 褰撴湁榧犳爣鎮仠鍦ㄩ摼鎺ヤ笂 */a...

娣樺疂搴楅摵瀵艰埅鏉SS浠ｇ爜
绛旓細border:none;}.all-cats .link:hover{background:#FFFFFF;}.all-cats .link .title{color:#000000;border:none;}.all-cats .link .title:hover{color:#000000;}.skin-box-bd .menu-list .menu .link:hover{background:#FFFFFF;}.skin-box-bd .menu-list .menu .link .title{background:...

姹娣樺疂鏃洪摵瀵艰埅鐨勯殣钘css浠ｇ爜,灏辨槸鐪嬩笉鍒版渶濂芥槸閫忔槑鎴栨槸鐧借壊鐨,榧犳爣绉...
绛旓細.skin-box-bd,.skin-box-bd .all-cats,.skin-box-bd .menu-list{height:0px;} 鍙戝竷鍚庯紝鐩存帴涓嶆樉绀瀵艰埅

娣樺疂搴楅摵瀵艰埅鏍鐐瑰嚮涔嬪悗鏄摑鑹插彲浠ユ敼棰滆壊鍚?鏈css浠ｇ爜鍚?
绛旓細鍙互,浣犲彲浠ユ壘鍒板搴旂殑浠ｈ〃閾炬帴鐨刟鍏冪礌 鍦╟ss閲岃竟鍐欎緥:a鍏冪礌鐨刢lass绫绘槸nav.閭ｄ箞灏卞彲浠ヨ繖鏍峰啓.nav a:hover{background:#fff;}

扩展阅读：鼠标选择一个总是多选 ... 页面导航栏css代码 ... 鼠标单击成了选中一片 ... 隐藏鼠标是哪一个键 ... 鼠标锁住了按哪个键 ... 鼠标一移动就一个框 ... 鼠标锁定了怎么解开 ... 下拉导航栏css代码 ... 鼠标点哪里都是方框 ...