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

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

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

<style type="text/css">
#navsite h5 {
	display: none;
}
#navsite ul {
	padding: 3px 0;
	margin-left: 0;
	border-bottom: 1px solid #778;
	font: bold 12px Verdana, sans-serif;
}

#navsite ul li {
	list-style: none;
	margin: 0;
	display: inline;
}

#navsite ul li a {
	padding: 3px 0.5em;
	margin-left: 3px;
	border: 1px solid #778;
	border-bottom: none;
	background: #DDE;
	text-decoration: none;
}

#navsite ul li a:link {
	color: #448;
}

#navsite ul li a:visited {
	color: #667;
}

#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
	color: #000;
	background: #AAE;
	border-color: #227;
}

#navsite ul li a#current {
	background: white;
	border-bottom: 1px solid white;
}
</style>

<div id="navsite">
	<h5>Site navigation:</h5>
	<ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">关于</a></li>
		<li><a href="#">档案</a></li>
		<li><a href="#">作品</a></li>
		<li><a href="#" id="current">演讲</a></li>
		<li><a href="#">联系</a></li>
	</ul>
</div>

可见，用这种方式做的导航，结构清晰，HTML代码简洁，改版时更是方便，根据本文的内容，相信您很容易做出符合自己网站风格的导航。