单行横向一级导航菜单

单行横向一级导航菜单

 

<div id="basic-information">
<div class="user-management">
<ul class="user-management-tab">
<li><a href="javascript:void(0);">基本资料</a><span>|</span></li>
<li><a href="javascript:void(0);">修改头像</a><span>|</span></li>
<li><a href="javascript:void(0);">修改登录密码</a><span>|</span></li>
<li><a href="javascript:void(0);">修改提现密码</a><span>|</span></li>
<li><a href="javascript:void(0);">邮箱管理</a><span>|</span></li>
<li><a href="javascript:void(0);">手机管理</a><span>|</span></li>
<li><a href="javascript:void(0);">银行卡信息</a><span>|</span></li>
<li><a href="javascript:void(0);">账号绑定</a><span>|</span></li>
</ul>
</div>
</div>

 

=====================================

 

#basic-information{
width: 850px;
height:100px;
border: 1px #F5F5F5 solid;/*#F5F5F5*/
margin: 50px auto;
}
.user-management{
width: 849px;
height: 45px;
margin: 0px auto;
}
.user-management-tab{
width: 850px;
height: 45px;
background:url(../images/user-management-tab-bg.png) repeat-x ;
}
.user-management-tab li{
float: left;
font-size: 14px;
height: 45px;
line-height: 45px;
text-align: center;

}
.user-management-tab li:hover{
border-top:3px solid #E22319;
margin-top:-3px;
background: #fff;
}
.user-management-tab li:hover a{
font-weight: bold;
padding:0 18px;
}
.user-management-tab li a{
color: #333333;
text-align: center;
display:inline-block;
padding:0 18px;

}
.user-management-tab li span {
color:#777777;
font-size:15px;
height: 33px;
}

 ===================