哈哈！原来是这样弄的，哟西哟西！ 非常漂亮和立体哦！

HTML代码：

<div class="bd">
  <ul>                                                               
   <li class="first"><a href="http://lady.qq.com/" target="_blank">首页</a></li>
   <li><a href="http://lady.qq.com/beauty/beauty.shtml" target="_blank">美容</a></li>
   <li><a href="http://meirong.qq.com/meirong_index.htm" target="_blank">整形</a></li>
   <li><a href="http://lady.qq.com/style/dress.shtml" target="_blank">服饰</a></li>
   <li><a href="http://lady.qq.com/diet/diet.htm" target="_blank">瘦身</a></li>
    <li><a href="http://lady.qq.com/xfsl/index.htm" target="_blank">秀发</a></li>
   <li><a href="http://lady.qq.com/emo/emotio.shtml" target="_blank">情感</a></li>
   <li><a href="http://lady.qq.com/view/index.htm" target="_blank">视线</a></li>
   <li><a href="http://lady.qq.com/nvphoto/photo.shtml" target="_blank">图片站</a></li>
   <li><a href="http://lady.qq.com/newvideo.htm" target="_blank">视频</a></li>
    <li><a href="http://blog.qq.com/vogue/" target="_blank">博客</a></li>
   <li><a href="http://lady.qq.com/zk/zk.htm" target="_blank">周刊</a></li>
   <li><a href="http://lady.qq.com/zhuant/index.htm" target="_blank">专题</a></li>
   <li><a href="http://lady.qq.com/share/share.htm" target="_blank">晒客</a></li>
   <li class="end"><a href="http://bbs.qq.com/navi.htm?f=29#preExpand=29&preType=0" target="_blank">论坛</a></li>
  </ul>
 </div>

CSS样式：

.bd {
 BACKGROUND: url(https://www.22ba.com/uploadfile/2011/0225/20110225034806714.png) repeat-x left top; HEIGHT: 28px
}
.bd UL {
 PADDING-LEFT: 0px; PADDING-TOP: 8px
}
.bd LI {
 BORDER-RIGHT: #bc3664 1px solid; PADDING-RIGHT: 15px; PADDING-LEFT: 15px; FONT-SIZE: 13px; FLOAT: left; PADDING-BOTTOM: 0px; BORDER-LEFT: #fe6e9f 1px solid; COLOR: #fff; LINE-HEIGHT: 13px; PADDING-TOP: 1px; HEIGHT: 11px; _padding-top: 2px; _line-max-height:100%; _max-height:100%
}
.bd .first {
 PADDING-LEFT: 15px; BORDER-LEFT-STYLE: none
}

效果：