純CSS實現移動端滾動導航效果

在手機web app開發中會涉及到水平導航，代碼如下：

 

 

.nav_dh{box-sizing: border-box;width: 100%;overflow-y: auto;height:2.5rem;line-height:2.5rem;background-color:#fff; position:fixed; z-index:999; top:44px;max-width:640px; min-width:320px;}
.nav_dh ul{width:600px;}
.nav_dh ul li{float:left;line-height:2.4rem;font-size:1rem; text-align:center; width: 12%; padding-left:2%;}
.nav_dh ul li a{ color:#fe5d33;}
.huandong::-webkit-scrollbar { display: none; height: 0 !important; }

 

<div class="nav_dh huandong">
   <ul>
        <li><a href="#">導航一</a></li>
        <li><a href="#">導航二</a></li>
	<li><a href="#">導航三</a></li>
	<li><a href="#">導航四</a></li>
	<li><a href="#">導航五</a></li>
	<li><a href="#">導航六</a></li>
   </ul>
</div>