<html>
<head>
<style>
.test ul{list-style:none;}
.test li{float:left; 100px;background:#ccc;margin-left:3px;line-height:30px;}
.test a{display:block;text-align:center;height:30px;}
.test a:link{color:#666;background:url(aa.jpg) #ccc no-repeat 5px 12px;text-decoration:none;}
.test a:visited{color:#666;text-decoration:underline;}
.test a:hover{color:#fff;font-weight:bold;text-decoration:none;backgroound:url(aa.jpg) #f00 no-repeat 5px 12px;}
</style>
</head>
<body>
<div class="test">
<ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul>
</div>
</body>
</html>
重点是: li {float:left;} //左边浮动, 按横向显示.
ul{list-style:none;} //去掉默认的圆点符号样式
.st_tree ul, .st_tree li{ float:none;} //去掉浮动,按列显示.
.st_left ul, .st_left li{ text-align:left;}