效果图如下：

　　HTML代码：

Example Source Code []

<ul id="nav">
<li><a href="" id="current"> 首页</a></li>
<li><a href="">Div CSS教程</a></li>
<li><a href="">CSS布局实例</a></li>
<li><a href="">CSS2.0教程</a></li>
<li><a href="">CSS酷站欣赏</a></li>
</ul>

　　CSS代码：

Example Source Code []

* {
font-size:12px;
text-align:center;
}
#nav {
width:700px;
margin:20px auto 0 auto;
}
#nav li {
display: inline;
list-style-type: none;
}
#nav li a:link,#nav li a:visited {
float:left;
padding:3px 10px;
text-decoration: none;
color:#666;
border-bottom:1px solid #fff;
}
#nav li a:hover {
color:#000;
border-bottom:1px solid #06f;
}
#nav li a#current {
color:#666;
border-bottom:1px solid #f60;
}

　　这款菜单的制作非常简单，但透露着一种简约的风格。我们在进行页面设计的时候，往往都喜欢别致的风格，但我们所需要考虑的是用户的感受，不同的站点类型应该营造出不同的风格气息，用户不但能获取信息，也有比较舒适的视觉感受。

　　看完整的运行效果：

Source Code to Run []

[ 可先修改部分代码 再运行查看效果 ]