1、新建文件，创建div和ul列表
2、为div设置宽度 ul列表清除样式
3、效果如图，没有美化还
4、在列表上面添加图片栏目，产品分类
5、效果如图
6、在ul外面添加边框
7、效果如图
8、美化ul列表，为其添加图片角标，设置行距和边框
9、效果如图，是不是美观多了
10、为li添加鼠标滑过样式
11、鼠标滑过效果，底色变暗
12、添加大的div，使列表整体向左移动10px和向下移动10像素。
13、效果如图，看起来更直观，好了左侧列表就弄好了，附上代码
<title>div与html制作左侧产品分类列表</title>
</head>
<style>
*{margin:0; padding:0px;}
ul,li{ list-style:none;}
.left_n{ width:221px; height:220px; float:left;}
.left_n ul{border:1px solid #CCC;}
.left_n ul li{line-height:40px; padding-left:30px; background:url(jk.png) no-repeat 5px center; border-bottom:1px solid #eee;}
.left_n ul li:hover{background:#eee;}
</style>
<body>
<div style="margin:10px;">
<div><img src="s3.png" /></div>
<div class="left_n">
<ul>
<li>中药化学成分化合物库</li>
<li>中药化学成分化合物库</li>
<li>中药化学成分化合物库</li>
<li>中药化学成分化合物库</li>
<li>中药化学成分化合物库</li>
</ul>
</div>
</div>
</body>
