JSFiddle - React, Tailwind, and code Playground

by ryanwheale

HTML

<ul id="site-nav">
    <li>
        <a href="#">Short</a>
        <ul>
            <li><a href="#">Here is some text</a></li>
            <li><a href="#">Here is some longer text</a></li>
            <li><a href="#">Here is some even way longer text</a></li>
            <li><a href="#">Here is some text</a></li>
        </ul>
    </li>
            
    <li>
        <a href="#">Some link text</a>
        <ul>
            <li><a href="#">Here is some text</a></li>
            <li><a href="#">Here is some longer text</a></li>
            <li><a href="#">Here is some even way longer text</a></li>
            <li><a href="#">Here is some text</a></li>
        </ul>
    </li>
</ul>

CSS

#site-nav {
    border: 1px solid red;
}

#site-nav > li {
    border: 1px solid blue;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    position: relative;
}
a {
    display: block;
    white-space: nowrap;
    padding: .3em .5em;
}
ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
}
#site-nav ul {
    max-height: 0;
    overflow: hidden;
    position: absolute;
    top: 100%;
    left: -50%;
    box-shadow: 3px 3px 10px rgba(30, 30, 30, .3);
}
#site-nav li:hover ul {
    max-height: 20em;
    overflow: visible;
}
#site-nav ul li {
    position: relative;
}
#site-nav ul li a {
    background-color: yellow;
    position: relative;
}