用CSs实战一个简洁实用的横向导航菜单，为了让您便于理解，我们为每一条CSS的定义都加上了注释，相信你年地本篇菜单制作教程，你肯定能用CSS写出更漂亮的导航菜单来，下面开始言归正传。请直接看代码吧：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS导航栏制作实例</title>
<style type="text/css">
#nav {height:26px;/*定义整个导航栏高度，并让菜单下面显示一条2像素的线*/
border-bottom:2px solid #2788da;
font:16px "微软雅黑";
}
#nav li{float:left;/*使li向左浮动,这样每个LI就自动横向排列了*/list-style-type: none; /*定义每个LI列表前的圆形标号为无，如果你想要显示圆点标号，可去掉此定义*/}
#nav li a{
color:#336699; /*定义菜单中的链接文字颜色*/
text-decoration:none;/*菜单链接下划线为无*/
padding-top:4px; /*文字距顶端为4px,调整文字上下居中用*/
display:block; /*使a链接对象的显示方式由一段文本改为一个块状对象(block)，就可以使用CSS的外边距、内边距、边框等属性了*/
width:80px;/*每个a的block宽度*/
height:22px;/*每个a的block高度*/
text-align:center; /*文字格式居中(水平)*/
background-color:#ececec;
margin-left:2px;/*控制每个block间距2px*/
}
#nav li a:hover{/*定义链接文字的鼠标悬停样式*/
background-color:green;
color:#ffffff;
}
#nav li a#current{/*控制当前页导航项特殊显示*/
background-color:#2788da;
color:#ffffff;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#" id="current">网站首页</a></li>
<li><a href="#">文章参考</a></li>
<li><a href="#">VB参考</a></li>
<li><a href="#">Blog推荐</a></li>
<li><a href="#">论坛交流</a></li>
<li><a href="#">RSS</a></li>
</ul>
</body>
</html>怎么样，不错吧，认真看下代码，相信聪明的你一定会学会CSS菜单制作方法的。菜单效果如下：
