<!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;/*显示隐藏内容*/
}
