<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>京東主頁</title>
????<style?type?=?"text/css">
????????body{
????????padding:?0;
????????font-size:?10pt;
????????}
????????.topmenu{
????????????display:?block;
????????????width:?220px;
????????????border:?2px?solid?#e4393c;
????????????margin:?0;
????????????padding:?0;
????????}
????????.toptitle{
????????????height:?40px;
????????????line-height:?40px;
????????????text-align:?left;?
????????????font-size:?11pt;
????????????font-weight:bold;
????????????color:?white;
????????????background-color:?#e4393c;
????????????padding-left:20px;
????????}
????????.topmenu?li?{
????????????height:?30px;
????????????line-height:?30px;
????????????font-size:11pt;
????????????list-style-type:?none;
????????????text-align:?left;
????????????padding-left:?8px;
????????????z-index:?3;
????????????background-image:?url(1.png);
????????????background-repeat:?no-repeat;
????????????background-position:?right;
????????}
????????.topmenu?li?a{
????????????text-decoration:?none;
????????????color:?#313131;
????????}
????????.topmenu??li?a:hover{
????????????text-decoration:?underline;
????????????font-weight:?bold;
????????????color:?#e4393c;
????????}
????????.topmenu?li:hover{
????????????border:?1px?solid?#DDD;
????????????border-right:?0;?????????
????????????box-shadow:?0?0?8px?#DDD;
????????????-moz-box-shadow:?0?0?8px?#DDD;
????????????-webkit-box-shadow:?0?0?8px?#DDD;
????????????background-image:none;
????????}
????????.submenu{
????????????display:?block;
????????????width:?715px;
????????????left:220px;
????????????position:?absolute;
????????????top:?40px;
????????????border:?1px?solid?#DDD;
????????????z-index:?4;
????????????background:white;
????????????-moz-box-shadow:?0?0?8px?#DDD;
????????????-webkit-box-shadow:?0?0?8px?#DDD;
????????}
????????.leftdiv{
????????????background:?gray;
????????????float:left;
????????????width:?490px;
????????????margin:?5px;
????????}?
????????.rightdiv{
????????????background:?lightblue;
????????????float:?left;
????????????height:200px;
????????????width:?200px;
????????????margin:?5px;
????????}
????</style>
</head>
<body>
????<ul?class?=?"topmenu">
????????<div?class?=?"toptitle">全部商品分類</div>
????????<li><a?href?=?"#">圖書,音像,數字商品</a>
????????????<div?class?=?'submenu'>
????????????????<div?class?=?"leftdiv">?
????????????????????左側二級分類<br/>
????????????????????左側二級分類<br/>
????????????????????左側二級分類<br/>
????????????????????左側二級分類<br/>
????????????????????左側二級分類<br/>
????????????????????左側二級分類<br/>
????????????????????左側二級分類<br/>
????????????????</div>
????????????????<div?class?=?"rightdiv">
????????????????????右側推薦品牌
????????????????</div>
????????????</div>
????????</li>
????????<li><a?href?=?"#">家用電器</a></li>
????????<li><a?href?=?"#">手機,運營商,數碼</a></li>
????????<li><a?href?=?"#">電腦,辦公</a></li>
????????<li><a?href?=?"#">家居,家具,家裝,廚具</a></li>
????????<li><a?href?=?"#">男裝,女裝,童裝,內衣</a></li>
????????<li><a?href?=?"#">個護化妝,清潔用品,寵物</a></li>
????????<li><a?href?=?"#">鞋靴,箱包,珠寶,奢侈品</a></li>
????????<li><a?href?=?"#">運動,戶外,鐘表</a></li>
????????<li><a?href?=?"#">汽車,汽車用品</a></li>
????????<li><a?href?=?"#">母嬰,玩具樂器</a></li>
????????<li><a?href?=?"#">食品,酒類,生鮮,特產</a></li>
????????<li><a?href?=?"#">醫(yī)藥保健</a></li>
????????<li><a?href?=?"#">圖書,音像,電子書</a></li>
????????<li><a?href?=?"#">彩票,旅行,充值,票務</a></li>
????????<li><a?href?=?"#">理財,眾籌,白條,保險</a></li>
????</ul>
</body>
</html>
商城分類導航效果 左側二級分類 和 右側推薦品牌為什么不是左右的?
皓韻兒
2016-10-20 13:18:38