<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航</title>
<style style="text/css">
*{
margin:0;
padding:0;
}
.cat{
width:150px;
border:1px solid #bbb;
background:#f8f8f8;
}
ul li{
list-style:none;
border-bottom:1px solid #dedede;
height:30px;
line-height:30px;
overflow:hidden;
}
.cat ul li i{
float: left;
width: 30px;
height:24px;
margin: 3px 3px 0 0;
background: url(images/sp.png) no-repeat;
}
ul li h3{
font-size:14px;
font-weight:400;
}
.cat_1 i{
background-position: 0 0;
}
.cat_2 i{
background-position: 0 -24px;
}
.cat_3 i{
background-position: 0 -48px;
}
.cat_4 i{
background-position: 0 -72px;
}
.cat_5 i{
background-position: 0 -96px;
}
.cat_6 i{
background-position: 0 -120px;
}
.cat_7 i{
background-position: 0 -144px;
}
.cat_8 i{
background-position: 0 -168px;
}
</style>
</head>
<body>
<!--添加列表的结构-->
<div class="cat">
<ul>
<li class="cat_1">
<i></i>
<h3>服装内衣</h3>
</li>
<li class="cat_2">
<i></i>
<h3>鞋包配饰</h3>
</li>
<li class="cat_3">
<i></i>
<h3>运动户外</h3>
</li>
<li class="cat_4">
<i></i>
<h3>珠宝手表</h3>
</li>
<li class="cat_5">
<i></i>
<h3>手机数码</h3>
</li>
<li class="cat_6">
<i></i>
<h3>家电办公</h3>
</li>
<li class="cat_7">
<i></i>
<h3>护肤彩妆</h3>
</li>
<li class="cat_8">
<i></i>
<h3>母婴用品</h3>
</li>
</ul>
</div>
</body>
</html>
设置的背景定位属性不管用，为啥？
.cat ul li i{
float: left;
width: 30px;
height:24px;
margin: 3px 3px 0 0;
background: url(sidebar.png);
display: inline;
}
去掉.cat ul ，这是因为优先级的问题。