横スクロールメニュー

<style>

    .navigation-content {
        position: relative;
        max-width: 800px;
        min-width: 300px;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    .navigation {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        list-style: none;
        overflow-x: auto;
        background: #fff;
    }

    .navigation li {
        padding: 5px 15px;
        color: #b7b7b7;
        word-break: keep-all;
        text-decoration: none;
        border-bottom: 1px solid #e5e5e5;
    }

    .navigation li:hover {
        color: #666;
        font-weight: bold;
        border-bottom: 1px solid black;
    }

</style>


<div class="navigation-content">
    <nav class="navigation">
        <li>
            <a>タイムライン</a>
        </li>
        <li>
            <a>いいね！が多い順</a>
        </li>

        <li>
            <a>ログイン順</a>
        </li>

        <li>
            <a>おすすめ順</a>
        </li>

        <li>
            <a>新メンバー</a>
        </li>

        <li>
            <a>キーワード</a>
        </li>
    </nav>
</div>