模仿京東多級菜單
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Menu</title>
<style type="text/css">
ul, dl, dd {
padding: 0;
margin: 0;
list-style: none;
color: #666;
}
.mainside_l {
width: 190px;
background: #fff;
border: 1px solid #ff5000;
margin: 20px;
}
/*整個列表的寬高，背景，邊框*/
.list_title {
height: 30px;
width: 188px;
background: #ff5000;
color: #fff;
font-size: 18px;
font-weight: bold;
line-height: 30px;
text-align: center;
margin: 0; /*若是不設置，標題與列表之間有空白*/
}
/*列表標題的寬高，背景，字體*/
.list {
padding-top: 6px; /*列表與標題之間的空隙*/
position: relative;
}
.list > li {
font-size: 14px;
line-height: 32px;
padding-left: 26px;
padding-right: 12px;
}
/*直接子元素*/
.list a {
color: #666;
}
/*列表文字顏色*/
.list > li:hover {
color: #ff5000;
background: #ffe4dc;
}
/*當鼠標滑過期，列表項顏色、背景變化*/
.list a:hover {
color: #ff5000;
}
/*當鼠標滑過期，列表字體顏色變化*/
.list_fuhao {
float: right;
}
/* > 這個符號靠右顯示*/
.li_toggle:hover ul {
display: block;
}
/*鼠標滑過期，顯示菜單*/
.list_items {
position: absolute;
left: 187px;
top: 0;
border: 2px solid #ff5000;
width: 456px;
height: 522px;
background: #fff;
display: none; /*隱藏菜單*/
}
/*二級菜單設置*/
.list_items_l {
float: left;
width: 456px;
height: 518px;
border-right: 1px solid #f4f4f4;
}
/*二級菜單左側區域設置*/
.list_items_l a {
text-decoration: none;
}
.list_dl {
padding: 0 14px 0 26px;
}
/*二級菜單左側定義列表*/
.list_dl h3 {
font-size: 18px;
font-weight: normal;
padding-top: 12px;
}
/*二級菜單左側標題*/
.list_dl h3 a {
color: #3c3c3c;
}
.list_dl dt span {
float: right;
font-size: 12px;
}
.list_dl dd {
font-size: 12px;
line-height: 26px;
padding-bottom: 10px;
}
/*二級菜單列表項設置*/
.list_dl dd a {
padding-right: 13px;
white-space: nowrap;
}
/*二級菜單列表超連接設置*/
.list_dl dd a:hover {
color: #666;
}
.list_items_r {
float: right;
width: 250px;
height: 518px;
text-align: left;
}
/*二級菜單右側區域設置*/
.list_items_r h3 {
font-size: 16px;
margin: 10px 0 0;
height: 40px;
line-height: 40px;
text-align: center;
}
/*二級菜單右側標題*/
.list_items_pic {
margin: 0 10px;
width: 232px;
height: 456px;
}
/*二級菜單右側列表設置*/
.pic {
float: left;
width: 116px;
height: 152px;
padding: 0 10px;
}
/*二級菜單右側圖片div設置*/
.pic a {
text-decoration: none;
}
.pic img {
width: 97px;
height: 97px;
border: 1px dotted #ededed;
}
.pic p {
width: 97px;
overflow: hidden;
text-overflow: clip;
white-space: nowrap;
font-size: 12px;
text-align: center;
}
/*二級菜單右側圖片div設置*/
</style>
</head>
<body>
<div class="mainside_l">
<h3 class="list_title">主題市場</h3>
<ul class="list">
<li class="li_toggle">
<a>女裝</a> / <a>男裝</a> / <a>內衣</a>
<span class="list_fuhao"> > </span>
<ul class="list_items">
<li class="list_items_l">
<dl class="list_dl">
<dt>
<h3><a href="#">女裝</a>
<span class="list_more"><a href="#">更多 ></a></span></h3>
</dt>
<dd>
<a href="#">羽絨服</a>
<a href="#">毛呢外套</a>
<a href="#">毛衣</a>
<a href="#">針織衫</a>
<a href="#">棉服</a>
<a href="#">連衣裙</a>
<a href="#">氣場外套</a>
<a href="#">風衣</a>
<a href="#">褲子</a>
<a href="#">衛衣</a>
<a href="#">T恤</a>
<a href="#">闊腿褲</a>
<a href="#">襯衫</a>
<a href="#">牛仔褲</a>
<a href="#">半身裙</a>
<a href="#">大碼女裝</a>
<a href="#">時尚套裝</a>
<a href="#">西裝</a>
<a href="#">打底衫</a>
<a href="#">夾克</a>
<a href="#">皮衣</a>
<a href="#">皮草</a>
<a href="#">媽媽裝</a>
<a href="#">民族舞臺</a>
<a href="#">腔調</a>
<a href="#">私服名媛</a>
<a href="#">甜美風</a>
<a href="#">文藝風</a>
<a href="#">街頭風</a>
<a href="#">原創</a>
<a href="#">通勤風</a>
<a href="#">婚紗禮服</a>
<a href="#"></a>
</dd>
<dt>
<h3><a href="#">男裝</a>
<span class="list_more"><a href="#">更多 ></a></span></h3>
</dt>
<dd>
<a href="#">潮牌館</a>
<a href="#">原創設計</a>
<a href="#">風格好店</a>
<a href="#">T恤</a>
<a href="#">襯衫</a>
<a href="#">夾克</a>
<a href="#">外套</a>
<a href="#">衛衣</a>
<a href="#">明星網紅</a>
<a href="#">休閒褲</a>
<a href="#">牛仔褲</a>
<a href="#">風衣</a>
<a href="#">西裝</a>
<a href="#">牛仔外套</a>
<a href="#">棒球服</a>
<a href="#">針織衫</a>
<a href="#">運動外套</a>
<a href="#">運動褲</a>
<a href="#">九分褲</a>
<a href="#">專櫃大牌</a>
<a href="#">POLO衫</a>
<a href="#">皮衣</a>
<a href="#">套裝</a>
<a href="#">穿搭攻略</a>
<a href="#">開衫</a>
<a href="#">馬甲</a>
<a href="#">呢大衣</a>
<a href="#">羽絨服</a>
<a href="#">棉衣</a>
<a href="#">中老年</a>
<a href="#">情侶裝</a>
<a href="#">大碼</a>
<a href="#">民族風</a>
</dd>
</dl>
</li>
<li class="list_items_r">
</li>
</ul>
</li>
<li class="li_toggle">
<a>鞋靴</a> / <a>箱包</a> / <a>配件</a>
<span class="list_fuhao"> > </span>
<ul class="list_items">
<li class="list_items_l">
<dl class="list_dl">
<dt>
<h3><a>鞋靴</a>
<span class="list_more"><a href="#">更多 ></a></span></h3>
</dt>
<dd>
<a href="#">女鞋</a>
<a href="#">紅人同款</a>
<a href="#">春上新</a>
<a href="#">帆布鞋</a>
<a href="#">小皮鞋</a>
<a href="#">一腳蹬</a>
<a href="#">鬆糕厚底</a>
<a href="#">平底鞋</a>
<a href="#">低跟</a>
<a href="#">中跟</a>
<a href="#">高跟</a>
<a href="#">穆勒鞋</a>
<a href="#">復古方頭</a>
<a href="#">尖頭</a>
<a href="#">小粗跟</a>
<a href="#">細跟</a>
<a href="#">男鞋</a>
<a href="#">休閒鞋</a>
<a href="#">板鞋</a>
<a href="#">帆布鞋</a>
<a href="#">運動風</a>
<a href="#">豆豆鞋</a>
<a href="#">樂福鞋</a>
<a href="#">雕花布洛克</a>
<a href="#">船鞋</a>
<a href="#">增高鞋</a>
<a href="#">正裝商務</a>
<a href="#">戶外休閒</a>
<a href="#">爸爸鞋</a>
<a href="#">德比鞋</a>
<a href="#">孟克鞋</a>
<a href="#">布鞋</a>
<a href="#"></a>
</dd>
<dt>
<h3><a href="#">箱包</a>
<span class="list_more"><a href="#">更多 ></a></span></h3>
</dt>
<dd>
<a href="#">春季新品</a>
<a href="#">女包</a>
<a href="#">騷包</a>
<a href="#">雙肩包</a>
<a href="#">男包</a>
<a href="#">旅行箱</a>
<a href="#">錢包</a>
<a href="#">真皮包</a>
<a href="#">大牌</a>
<a href="#">寬肩帶</a>
<a href="#">小方包</a>
<a href="#">水桶包</a>
<a href="#">迷你包</a>
<a href="#">鏈條包</a>
<a href="#">貝殼包</a>
<a href="#">波士頓包</a>
<a href="#">手拿包</a>
<a href="#">單肩包</a>
<a href="#">手提包</a>
<a href="#">斜挎包</a>
<a href="#">零錢包</a>
<a href="#">媽媽包</a>
<a href="#">歐美潮搭</a>
<a href="#">日韓流行</a>
<a href="#">青春學院</a>
<a href="#">男士商務</a>
<a href="#">腰包</a>
<a href="#">拉桿箱</a>
<a href="#">胸包</a>
<a href="#">手工皮具</a>
<a href="#">紅人優品</a>
</dd>
<dt>
<h3><a href="#">配件</a>
<span class="list_more"><a href="#">更多 ></a></span></h3>
</dt>
<dd>
<a href="#">帽子</a>
<a href="#">針織帽</a>
<a href="#">貝雷帽</a>
<a href="#">漁夫帽</a>
<a href="#">鴨舌帽</a>
<a href="#">禮帽</a>
<a href="#">毛線帽</a>
<a href="#">套頭帽</a>
<a href="#">爵士帽</a>
<a href="#">盆帽</a>
<a href="#">八角帽</a>
<a href="#">圍巾</a>
<a href="#">羊絨圍巾</a>
<a href="#">披肩</a>
<a href="#">羊毛圍巾</a>
<a href="#">真絲圍巾</a>
<a href="#">棉麻圍巾</a>
<a href="#">方巾</a>
<a href="#">皮草圍巾</a>
<a href="#">羊絨羊毛混紡圍巾</a>
<a href="#">羊毛棉混紡圍巾</a>
<a href="#">手套</a>
<a href="#">真皮手套</a>
<a href="#">觸屏手套</a>
<a href="#">半指手套</a>
<a href="#">全指手套</a>
<a href="#">毛線手套</a>
</dd>
</dl>
</li>
</ul>
</li>
<li class="li_toggle">
<a href="#">童裝玩具</a> / <a href="#">孕產</a> / <a href="#">用品</a>
<span class="list_fuhao"> > </span>
</li>
<li class="li_toggle">
<a href="#">家電</a> / <a href="#">數碼</a> / <a href="#">手機</a>
<span class="list_fuhao"> > </span>
</li>
</ul>
</div>
</body>
</html>
相關文章
- 1. demo54-模仿京東
- 2. 仿京東多選欄
- 3. 仿京東訂單Deom
- 4. python爬取京東菜單
- 5. iOS仿京東分類菜單之UICollectionView內容
- 6. 仿京東左側菜單 hover效果-簡易demo
- 7. 仿京東搜索
- 8. 仿京東首頁
- 9. Android 仿京東訂單頁面
- 10. 仿京東的購物車和訂單
- 更多相關文章...
- • Eclipse 菜單 - Eclipse 教程
- • Eclipse 重構菜單 - Eclipse 教程
- • 委託模式
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. demo54-模仿京東
- 2. 仿京東多選欄
- 3. 仿京東訂單Deom
- 4. python爬取京東菜單
- 5. iOS仿京東分類菜單之UICollectionView內容
- 6. 仿京東左側菜單 hover效果-簡易demo
- 7. 仿京東搜索
- 8. 仿京東首頁
- 9. Android 仿京東訂單頁面
- 10. 仿京東的購物車和訂單