SOURCE

<ul>
  <li class="cat1">
    <i></i>
    <h3>cat1</h3>
  </li>
  <li class="cat2">
    <i></i>
    <h3>cat2</h3>
  </li>
  <li class="cat3">
    <i></i>
    <h3>cat3</h3>
  </li>
</ul>

ul{
  width:200px;
  list-style:none;
  margin:0px;
  padding:0px;
}

/*这里面为什么要使用h3来表现? 
使用h3导致了margin过大问题。还要等度设置样式
*/

ul li h3{
  margin:0px;
  padding:0px;
  
}

ul li{
  background:plum;
  border-bottom:1px solid red;
  /*这里为什么要清除浮动？*/
  overflow:hidden;
  /* height:40px; */  
}

ul li i{
  float:left;
  width:24px;
  /* border:1px solid red; */
  height:30px;
  background:url(http://joshua0125.test.upcdn.net/demo/sidebar.png)
}

li.cat1 i{
  background-position:0 -20px;
}

li.cat2 i{
  background-position:-42px 5px;
}