![]()
![]()
<!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>
<li>女裝 /內衣
<!-- 導航欄內部隱藏內容 -->
<div class="mr-item">
<p><img src="images/2.jpg" alt="" title=""/></p>
<p>【黑色上市】Huawei/華爲 Mate 9 32/64GB4G智能手機限量搶</p>
<p>華爲官方旗艦店</p>
</div>
</li>
<li>男裝 /運動戶外<!-- 導航欄內部隱藏內容 -->
<div class="mr-item">
<p><img src="images/3.jpg" alt="" title=""/></p>
<p>【黑色上市】Huawei/華爲 Mate 9 32/64GB4G智能手機限量搶</p>
<p>華爲官方旗艦店</p>
</div>
</li>
<li>女鞋 /男鞋 /箱包<!-- 導航欄內部隱藏內容 -->
<div class="mr-item">
<p><img src="images/4.jpg" alt="" title=""/></p>
<p>【黑色上市】Huawei/華爲 Mate 9 32/64GB4G智能手機限量搶</p>
<p>華爲官方旗艦店</p>
</div>
</li>
<li>化妝品 /個人護理<!-- 導航欄內部隱藏內容 -->
<div class="mr-item">
<p><img src="images/2.jpg" alt="" title=""/></p>
<p>【黑色上市】Huawei/華爲 Mate 9 32/64GB4G智能手機限量搶</p>
<p>華爲官方旗艦店</p>
</div>
</li>
<li>腕錶 /珠寶飾品 /眼鏡<!-- 導航欄內部隱藏內容 -->
<div class="mr-item">
<p><img src="images/3.jpg" alt="" title=""/></p>
<p>【黑色上市】Huawei/華爲 Mate 9 32/64GB4G智能手機限量搶</p>
<p>華爲官方旗艦店</p>
</div>
</li>
<li>手機 /數碼 /電腦辦公<!-- 導航欄內部隱藏內容 -->
<div class="mr-item">
<p><img src="images/4.jpg" alt="" title=""/></p>
<p>【黑色上市】Huawei/華爲 Mate 9 32/64GB4G智能手機限量搶</p>
<p>華爲官方旗艦店</p>
</div>
</li>
<li>母嬰玩具<!-- 導航欄內部隱藏內容 -->
<div class="mr-item">
<p><img src="images/2.jpg" alt="" title=""/></p>
<p>【黑色上市】Huawei/華爲 Mate 9 32/64GB4G智能手機限量搶</p>
<p>華爲官方旗艦店</p>
</div>
</li>
<li>零食 /進口食品 /茶酒<!-- 導航欄內部隱藏內容 -->
<div class="mr-item">
<p><img src="images/3.jpg" alt="" title=""/></p>
<p>【黑色上市】Huawei/華爲 Mate 9 32/64GB4G智能手機限量搶</p>
<p>華爲官方旗艦店</p>
</div>
</li>
<li>生鮮水果<!-- 導航欄內部隱藏內容 -->
<div class="mr-item">
<p><img src="images/4.jpg" alt="" title=""/></p>
<p>【黑色上市】Huawei/華爲 Mate 9 32/64GB4G智能手機限量搶</p>
<p>華爲官方旗艦店</p>
</div>
</li>
<li>大家電 /生活電器<!-- 導航欄內部隱藏內容 -->
<div class="mr-item">
<p><img src="images/2.jpg" alt="" title=""/></p>
<p>【黑色上市】Huawei/華爲 Mate 9 32/64GB4G智能手機限量搶</p>
<p>華爲官方旗艦店</p>
</div>
</li>
<li>傢俱建材<!-- 導航欄內部隱藏內容 -->
<div class="mr-item">
<p><img src="images/3.jpg" alt="" title=""/></p>
<p>【黑色上市】Huawei/華爲 Mate 9 32/64GB4G智能手機限量搶</p>
<p>華爲官方旗艦店</p>
</div>
</li>
<li>汽車 /配件 /用品<!-- 導航欄內部隱藏內容 -->
<div class="mr-item">
<p><img src="images/4.jpg" alt="" title=""/></p>
<p>【黑色上市】Huawei/華爲 Mate 9 32/64GB4G智能手機限量搶</p>
<p>華爲官方旗艦店</p>
</div>
</li>
<li>家紡 /家飾 /<!-- 導航欄內部隱藏內容 -->
<div class="mr-item">
<p><img src="images/2.jpg" alt="" title=""/></p>
<p>【黑色上市】Huawei/華爲 Mate 9 32/64GB4G智能手機限量搶</p>
<p>華爲官方旗艦店</p>
</div>
</li>
<li>醫藥保健<!-- 導航欄內部隱藏內容 -->
<div class="mr-item">
<p><img src="images/3.jpg" alt="" title=""/></p>
<p>【黑色上市】Huawei/華爲 Mate 9 32/64GB4G智能手機限量搶</p>
<p>華爲官方旗艦店</p>
</div>
</li>
<li>廚具 /收納 /寵物<!-- 導航欄內部隱藏內容 -->
<div class="mr-item">
<p><img src="images/4.jpg" alt="" title=""/></p>
<p>【黑色上市】Huawei/華爲 Mate 9 32/64GB4G智能手機限量搶</p>
<p>華爲官方旗艦店</p>
</div>
</li>
<li>圖書音像<!-- 導航欄內部隱藏內容 -->
<div class="mr-item">
<p><img src="images/2.jpg" alt="" title=""/></p>
<p>【黑色上市】Huawei/華爲 Mate 9 32/64GB4G智能手機限量搶</p>
<p>華爲官方旗艦店</p>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
@charset "utf-8";
/**css document*/
* { /*通配選擇器，清除所有標籤默認樣式*/
padding: 0;
margin: 0;
list-style: none;
}
#mr-box { /*id選擇器，設置外邊框樣式*/
width: 1150px;
height: 560px;
margin: 8px auto;
border: 2px solid rgb(255, 0, 0);
}
.mr-bg { /*類選擇器，設置內部背景*/
width: 1065px;
height: 497px;
margin: 16px auto;
background: url("../images/1.jpg") no-repeat right/865px 497px;
}
.mr-bg ul { /*類選擇器，包含選擇器，左側導航欄樣式*/
width: 202px;
height: 497px;
background: rgb(221, 221, 221);
position: relative;
}
.mr-bg ul li { /*類選擇器、包含選擇器，設置左側導航欄字體樣式*/
width: 202px;
height: 31px;
font-size: 14px;
text-align: center;
line-height: 31px;
}
.mr-bg ul li:hover { /*類選擇器、包含選擇器、僞類選擇器，鼠標懸停顯示背景顏色*/
background-color: rgb(216, 202, 202);
}
/**設置導航欄內部隱藏內容**/
.mr-item { /*類選擇器，設置隱藏內容樣式*/
width: 865px;
height:497px;
background: rgb(238,238,238);
position: absolute;
top: 0;
left: 202px;
display: none;/*隱藏內容爲不可見*/
}
.mr-item p img{/*類選擇器、包含選擇器，設置圖片距裏上外邊距50像素*/
margin-top: 50px;
}
.mr-bg ul li:hover .mr-item{/*類選擇器、包含選擇器、僞類選擇器，鼠標懸停顯示隱藏內容*/
display: block;/*顯示隱藏內容*/
}
