How to create horizontal scrolling menu with drop-down?

Question

I'm trying to build a (possibly) CSS-only menu for an HTML5 page with the following requisites:

• menu should be an horizontal scrolling list (a top navbar), with scrolling buttons and no visible scrollbars
• first level menu items could have sub-items like a multiple nested drop-down menu

Visually:

-------------------------------------------------------------------------
| < |     Menu 1    |     Menu 2 +  |     Menu 3    |     Menu 4    | > |
-------------------------------------------------------------------------
                      | menu 2.1   |
                      --------------
                      | menu 2.2 + |---------------
                      --------------  menu 2.2.1  |
                      | menu 2.1   |---------------
                      --------------  menu 2.2.2  |
                                   |---------------

where the < and > buttons scroll the main menu to the left or right (eventually opened sub items should undrop themselves).

I also would like to use CSS only (no JavaScript), but this is an option.

I've already spent lot of time for this and tests, but I didn't get any satisfying example.

Please suggest me how can I achieve this.

Answer 1

You can do so quite easily.

You firs need a tree like structure using html lists :

<ul class="my-menu">
<li>
    TOP 1
    <ul>
        <li>
            1 - 1 >
            <ul>
                <li>
                    1 - 1 - 1
                </li>
                <li>
                    1 - 1 - 2
                </li>
            </ul>
        </li>
    </ul>
</li>
</ul>

You need to display the first level side by side to have the horizontal menu :

ul.my-menu > li {
    display :  inline-block;
}

For the second level we wish it to display just below the TOP1 text. So we will put it in absolute :

ul.my-menu > li > ul{
    position : absolute;
}

Now let's hide the second & Third level.

ul.my-menu > li > ul li{
    display: none;
}

Finally we can add the hover logic. Basically we will say if my parent "li" is hovered then display me.

ul.my-menu li:hover > ul > li {
    display: block;
}

Of course you need to work more on the display. The size & position of the boxes are very important as if not the mouse will leave the bounderies of the parent which will close the display.

Here is a jsfiddle : https://jsfiddle.net/9mbLabj4/1/