平时项目用到菜单或者Tab，首先想到的是到网上找一个漂亮的插件来用，周末闲来无事，自己也写一个简洁，轻量的Tab菜单，分享如下：
效果图：
Common CSS部分：
.nav{ list-style:none;
border-bottom:1px solid #11a3ff;
height:30px;
margin:0px;
padding-left:0px;
font-size:12px;
text-align:center;
}
.nav li{ float:left;
border:1px solid #11a3ff;
width:80px; height:29px;
background:#a3dbff; margin:0px 4px 0px 0px;
}
.nav a:link,a:visited{
display:block; /* 块元素 */
color:#006eb3;
text-decoration:none;
padding:8px 0px 8px 0px;
}
.nav a:hover{ background:#006eb3; color:#FFF; padding:8px 0px 8px 0px; }
.content{
border-left:1px solid #11a3ff; /* 左边框 */
border-right:1px solid #11a3ff; /* 右边框 */
border-bottom:1px solid #11a3ff; /* 下边框 */
}
HTML部分：
<ul class="nav">
<li class="home"><a href="home.html">首页</a></li>
<li class="news"><a href="news.html">新闻</a></li>
<li class="music"><a href="music.html">音乐</a></li>
</ul>
<div class="content">
<span>
<a href="#"><img src="pic1.jpg" /></a><br/>
<a href="#"><center>追忆往事，展望未来</center></a>
</span>
<ul class="index">
<li><a href="#">[首页] 追忆往事，展望未来。新年寄语</a></li>
<li><a href="#">[新闻] 每年五一、十一长假，很多人不愿出门</a></li>
<li><a href="#">[新闻] 清华大学电子系研制成功新一代...</a></li>
<li><a href="#">[体育] 奥运火炬接力火热进行</a></li>
<li><a href="#">[音乐] 网民调查，你最喜欢的音乐类型</a></li>
<li><a href="#">[博客] *博客新版正式发布，网友...</a></li>
</ul>
</div>
链接下载