<!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);
}