完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>商品分类</title>
<link rel="stylesheet" type="text/css" href="css/shangp.css"/>
<script src="js/iconfont.js"></script>
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="shangp">
<ul>
<h3>商品分类</h3>
<div class="fenl">
<li><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-nvzhuangneiyi"></use></svg>
<a href="#">女装</a>/<a href="#">内衣</a></li>
<li><svg class="icon" aria-hidden="true"><use xlink:href="#icon-nanzhuang"></use></svg>
<a href="#">男装</a>/<a href="#"><span>运动户外</span></a></li>
<li><svg class="icon" aria-hidden="true"><use xlink:href="#icon-huazhuangpin"></use></svg>
<a href="#">化妆品</a>/<a href="#">个人护理</a></li>
<li><svg class="icon" aria-hidden="true"><use xlink:href="#icon-ertongmuying"></use></svg>
<a href="#">母婴用品</a>/<a href="#">玩具</a></li>
<li><svg class="icon" aria-hidden="true"><use xlink:href="#icon-jiajujiafang"></use></svg>
<a href="#">居家</a>/<a href="#">家纺家饰</a></li>
<li><svg class="icon" aria-hidden="true"><use xlink:href="#icon-qichepeijian"></use></svg>
<a href="#">汽车</a>/<a href="#">配件用品</a></li>
</div>
</ul>
</div>
</body>
</html>
css样式：
*{
padding: 0;
margin: 0;
border: 0;
}
ul li{
list-style: none;
}
.shangp{
border: 1px solid white;
width: 200px;
height: 300px;
margin: 10% 60% 0 40%;
}
.shangp h3{
background-color: rgb(190,10,10);
text-align: center;
color: white;
height: 40px;
padding-top: 10px;
}
.shangp li{
padding:10px 0;
}
.shangp .fenl{
background-color: rgb(236,227,227);
}
li a{
color: #000000;
text-decoration: none;
margin: 0 5px;
}
li a:hover{
font-weight: bolder;
}
ul li:hover{
background-color: #FFFFFF;
}
注意哦：光有代码是不行的啦，还要引入js
