![]()
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>有序列表跟無序列表的嵌套</title>
<link href="css/style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="mr-box">
<div class="mr-bg">
<!-- 無序列表 -->
<ul class="mr-row">
<li class="pic">
商品分類
<!-- 有序列表 -->
<ol>
<li>女裝 /內衣</li>
<li>男裝 /運動戶外</li>
<li>女鞋 /男鞋 /箱包</li>
<li>化妝品 /個人護理</li>
<li>腕錶 /飾品 /眼鏡</li>
<li>手機 /數碼 /辦公</li>
<li>零食 /食品 /茶酒</li>
<li> 生鮮水果</li>
<li>生活電器</li>
</ol>
</li>
<li class="pic">春節特賣
<!-- 無序列表 -->
<ul class="mr-coll">
<li>服裝服飾</li>
<li>母嬰會場</li>
<li>數碼家電</li>
<li>家紡家居</li>
<li>美妝會場</li>
<li>汽車特賣</li>
<li>進口尖貨</li>
<li>醫藥保健</li>
</ul>
</li>
<li class="pic">會員</li>
<li class="pic">電器城</li>
<li class="pic">天貓會員</li>
</ul>
</div>
</div>
</body>
</html>
@charset "utf-8";
/**css document*/
* { /*通配選擇器，清除默認樣式*/
margin: 0;
padding: 0;
list-style: none;
}
#mr-box { /*id選選擇器，設置邊框樣式*/
width: 1097px;
height: 541px;
margin: 0 auto;
border: 2px solid rgb(255, 0, 0);
}
.mr-bg { /*類選擇器，設置居中背景樣式*/
width: 1000px;
height: 500px;
margin: 0 auto;
background: url("../images/2.jpg") no-repeat bottom/1000px 463px;
}
.mr-bg .mr-row { /*包含選擇器，設置橫向導航欄背景樣式*/
width: 1000px;
height: 38px;
background: rgb(221, 39, 39);
}
.mr-row .pic { /*包含選擇器，設置橫向導航欄字體樣式*/
width: 160px;
height: 38px;
float: left;
padding-left: 20px;
line-height: 38px;
position: relative;
}
.mr-row .pic:first-child { /*僞類選擇器，設置導航欄第1項樣式*/
margin-left: 35px;
}
.mr-row .pic:hover { /*包含選擇器，設置橫向導航欄鼠標懸停樣式*/
background: rgb(224, 61, 61);
}
/**-- 第1列橫向導航欄內堅嚮導航欄 --**/
ol { /*設置有序列表隱藏導航欄樣式*/
width: 180px;
height: 343px;
font-size: 14px;
background: rgb(254, 209, 203);
float: left;
position: absolute;
left: 0;
display: none; /*默認隱藏該樣式內容*/
}
ol li { /*包含選擇器，設置字體縮進*/
text-indent: 35px;
}
ol li:hover { /*鼠標懸停顯示樣式背景*/
background: rgb(255, 255, 255);
}
.pic:hover ol { /*鼠標懸停顯示隱藏有序列表標籤*/
display: block;
}
/** 春節特賣樣式 **/
.mr-coll { /*設置春節特賣隱藏導航欄樣式*/
width: 185px;
height: 432px;
background: rgb(254, 218, 214);
position: absolute;
left: 0;
}
.mr-coll li { /*設置春節特賣隱藏導航欄樣式*/
width: 153px;
height: 32px;
border: 1px solid rgb(203, 12, 16);
border-radius: 10px;
line-height: 32px;
text-align: center;
margin: 15px auto;
}
.mr-coll li:hover { /*設置春節特賣隱藏導航欄鼠標劃過樣式*/
background: rgb(203, 12, 16);
}
