CSS - 横向菜单

.menu{ ???box-sizing: border-box; ???width: 100%; ???white-space: nowrap; ???white-space: nowrap; ???overflow-y: hidden; ???overflow-x: auto; ???-ms-overflow-style: none; ???-webkit-overflow-scrolling: touch; ???padding: .5rem 0;}.menu ul,.menu ul li { ???position: relative;}.menu ul { ???list-style: none; ???margin: 0; ???padding: 0; ???display: block;}.menu ul li { ???padding: 0; ???margin: 0; ???height: 100%;}.menu ul li,.menu { ???display: inline-block; ???zoom: 1; ???vertical-align: middle;}.menu::-webkit-scrollbar { ???display: none;}.menu ul li a { ???color: #777; ???padding: .5rem 1rem; ???display: block; ???text-decoration: none; ???white-space: nowrap;}.menu ul li a:hover,.menu ul li a:focus { ???background-color: #eee;}

<div class="menu"> ???<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> ???????<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> ???????<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>