CSS - 横向菜单

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;
}

HTML:

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

DEMO:

• 哈哈
• 嘿嘿
• 呀哈
• 哦吼
• 嘻嘻
• 哇呀
• 啧啧
• 哎呀
• 哦哟
• 咦哈
• 嚯嚯
• 嗨哈
• 啊咦
• 呀呀
• 哇啦
• 啦咔
• 哈呀
• 嘿嘿

原文地址：https://www.cnblogs.com/nurtay/p/css-menu.html