JSFiddle - React, Tailwind, and code Playground

by gerritvanaaken

HTML

<ul class="level1">
    <li><a href="#">Menu Item 1</a>
        <ul class="level2 longer">
            <li><a href="#">Pretty Damn Long Menu Item A</a></li>
            <li><a href="#">Pretty Damn Long Menu Item B</a></li>
            <li><a href="#">Pretty Damn Long Menu Item C</a></li>
        </ul>
    </li>
    <li><a href="#">Menu Item 2</a>
        <ul class="level2">
            <li><a href="#">Menu Item A</a></li>
            <li><a href="#">Menu Item B</a></li>
            <li><a href="#">Menu Item C</a></li>
        </ul>
    </li>
    <li><a href="#">Menu Item 3</a></li>
    <li><a href="#">Menu Item 4</a></li>
    <li><a href="#">Menu Item 5</a></li>
    <li><a href="#">Menu Item 6</a></li>
</ul>

CSS

* { margin: 0; padding: 0; list-style: none; }

ul.level1 {
    display: table;
    width: 100%
}

ul a {
    background: red;
    margin: 2px;
    display: block;
    padding: 5px;
}

ul.level1 > li {
    display: table-cell;
    position: relative;
}

ul ul {
    display: none;
    position: absolute;
    top: 24px;
    padding-top: 7px;
}

ul li:hover ul {
    display: block;
}

/* interesting part begins here */

/* works only with Webkit */
ul ul { left: 0; right: 0; }
ul ul.longer { right: -100%; }

/* works only with Firefox */
/*
ul ul { width: 16.6777%; }
ul ul.longer { width: 33.33%; }
*/

/* works only with Explorer */
/*
ul ul { left: 0; }
ul ul.longer { width: 200%; }
*/