简单的css 菜单

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
.sub-nav{
position: relative;
border-bottom: 1px solid #E3E6EA;
height:42px;
font-family:"Microsoft YaHei", simsun;
}

.sub-nav ul{
padding:14px 0px 0px 25px;
}
.sub-nav ul li{
float:left;
line-height:14px;
color:#5f727f;
border-right: 1px solid #dcdde0;
curson: pointer;
}
ul, ol{
list-style:outside none none;
}
.sub-item-in{
margin-left:0;
}
.sub-nav ul li .sub-item-in{
padding:0 6px;
margin: 0 5px;
position:relative;
font-size:14px;
}
.sub-nav .trans {
position: absolute;
height: 3px;
background: none repeat scroll 0% 0% #5EB5F1;
overflow: hidden;
left: 25px;
bottom: -1px;
width: 68px;
font-size: 0px;
line-height: 0;
}
.has-trans {
transition: all 0.3s ease-out 0s;
}
</style>

</head>
<body>
<div class="sub-nav">
<ul>
<li><span class="sub-item-in" data-spm-click="gostr=/tbtrip;locaid=d101">Guo Nei</span></li>
<li><span class="sub-item-in" data-spm-click="gostr=/tbtrip;locaid=d102" data-type="iflight">HongKong</span></li>
<li><span class="sub-item-in" data-spm-click="gostr=/tbtrip;locaid=d103" data-type="flightCheap">Special Price</span></li>
<li><span class="sub-item-in" data-spm-click="gostr=/tbtrip;locaid=d104" data-type="iflightCheap">International Special Price</span></li>
</ul>
<div style="left: 25px; width: 40px;" class="trans has-trans J_TransBar"></div>
</div>
</body>
</html>