UEDspace

今天在网上看到一位同行写的页面（http://www.120xin.com/）看到导航写的不错，结构和样式都很合理，仿他的代码自己又重新写了一个，个人感觉不错，这种效果的导航这样写很合理，以下是相关代码：

html

<div id="wrap">
    <div class="nav">
        <div class="nav_in">
            <ul>
                <li><a href="#" target="_self">首页</a></li>
                <li><a href="#" target="_self">咨询问答</a></li>
                <li><a href="#" target="_self">健康测试</a></li>
                <li><a href="#" target="_self">找医生</a></li>
                <li><a href="#" target="_self">找医院</a></li>
                <li><a href="#" target="_self">查疾病</a></li>
                <li><a href="#" target="_self">查药品</a></li>
                <li><a href="#" target="_self">查器械</a></li>
                <li><a href="#" target="_self">健康资讯</a></li>
                <li><a href="#" target="_self"><span class="tuan">健康团 <sup>hot</sup></span></a></li>
            </ul>
        </div>
    </div>
</div>

css

<style type="text/css">
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53,sans-serif;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clearfix:after{ content:"\020"; display:block; height:0; clear:both; visibility:hidden;}
.clearfix{ zoom:1;}
#wrap{ width:960px; margin-left:auto; margin-right:auto;}
/*nav*/
.nav{ background:url(images/nav_l.gif) no-repeat; padding-left:5px;}
.nav_in{ background:url(images/nav_r.gif) no-repeat right bottom; padding-right:5px;}
.nav_in ul{ height:37px; background:url(images/nav_m.gif) repeat-x;}
.nav_in ul li{ float:left;}
.nav_in ul li a{ display:block; float:left; line-height:37px; height:37px; color:#FFF; font-size:14px; padding:0 10px;}
.nav_in ul li a:hover{ color: #FFF; text-decoration:none; background-color:#2E86E1;}
.nav_in ul li .tuan{ vertical-align:top; color:#6F9;}
.nav_in ul li .tuan sup{ color:#FC0;}
</style>

如果你有更好的方案欢迎提出！谢谢！