简单的css 菜单

浏览数：91 / 时间：2015年06月09日

<!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>