用 UL 制作的纵向导航菜单效果

导航菜单可以说是网站制作中最常见的工作，当然，由于他的重要性（基本上整个网站所有页面都会显示），所以，有不少设计师在上面花费了很多心血。本文介绍的是对纵向导航菜单的最简单的实现，相信明白了实现原理后，你可以制作出属于自己的精彩的导航效果，到时，可别忘了和大家共享哟！

用 UL 制作的纵向导航菜单效果 – 示例

<style type="text/css">
#navsite {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 0.7em;
	font-weight: bold;
	width: 12em;
	border-right: 1px solid #666;
	padding: 0;
	margin-bottom: 1em;
	background-color: #9cc;
	color: #333;
}
#navsite ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#navsite ul li {
	margin: 0;
	border-top: 1px solid #003;
}
#navsite ul li a {
	display: block;
	padding: 2px 2px 2px 0.5em;
	border-left: 10px solid #369;
	border-right: 1px solid #69c;
	border-bottom: 1px solid #369;
	background-color: #036;
	color: #fff;
	text-decoration: none;
	width: 100%;
}
html>body #navsite ul li a {
	width: auto;
}
#navsite ul li a:hover {
	border-left: 10px solid #036;
	border-right: 1px solid #69c;
	border-bottom: 1px solid #369;
	background-color: #69f;
	color: #fff;
}

</style>

<div id="navsite">
	<ul>
		<li><a href="http://www.codebit.cn">首页</a></li>
		<li><a href="http://www.codebit.cn/pub/article.php">技术文章</a></li>
		<li><a href="http://www.codebit.cn/pub/contact.php">联系我们</a></li>
		<li><a href="http://www.codebit.cn/pub/submit.php">提交文章</a></li>
		<li><a href="http://feeds.feedburner.com/codebit">RSS 订阅</a></li>
	</ul>
</div>