用 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代码简洁,改版时更是方便,根据本文的内容,相信您很容易做出符合自己网站风格的导航。