一个2007流行的导航效果

效果：


程序代码
<style>
*{ margin:0; padding:0;font-family:Verdana, "宋体", Arial; font-size:12px; line-height:1.8}
ul,li{list-style:none;}
a:link,a:visited{color:#000;text-decoration: none;}
a:hover,a:active{color:#CC0000;text-decoration: none;}
#c{ background:#FFCC33; border-top: 1px solid #fff; padding:5px 15px;}
#tags{ position:absolute; margin-top:-28px;}
h1{ font-size:18px;}
p{ background: #FF9900; padding:2px 15px; border-top:1px solid #FFFFCC}
#tags li{padding:3px 10px;float:right;margin-right:10px;border:1px solid #FFFFCC;border-bottom:none;background: #FDF5B5;}
#tags .z{font-weight: bold; background:#FF9900}
</style>

 程序代码
<div id="c">
  <h1>CNWEBSHOW.COM</h1>
  <samp>网页设计秀</samp>
</div>
<div id="tags">
  <ul>   
    <li><a href="http://www.cnwebshow.com/up/pic/0708050171000/0." target="_blank">我的牢骚</a></li>
    <li><a href="http://www.cnwebshow.com/up/pic/0708050171000/0." target="_blank">情感文章</a></li>
 <li><a href="http://www.cnwebshow.com/up/pic/0708050171000/0." target="_blank">笑话音乐</a></li>
 <li><a href="http://www.cnwebshow.com/up/pic/0708050171000/0." target="_blank">友情链接</a></li>
 <li><a href="http://www.cnwebshow.com/up/pic/0708050171000/0." target="_blank">给我留言</a></li>
 <li class="z"><a href="http://www.cnwebshow.com/up/pic/0708050171000/0." target="_blank">网站首页</a></li>
  </ul>
</div>
<p> </p>

HTML代码：