JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<ul id="contentBox">
    <li>
        Go
        <ul>
            <li>
                <h1>
                    Quickly jump to your desired location
                </h1>
                Lorem ipsum dolor sit amet. </li>
        </ul>
    </li>
    <li>
        Messages
        <ul>
            <li>
                <h1>
                    Access personal and system messages and alerts
                </h1>
                Lorem ipsum dolor sit amet. </li>
        </ul>
    </li>
    <li>
        Assets
        <ul>
            <li>
                <h1>
                    Manage your assets
                </h1>
                Lorem ipsum dolor sit amet. </li>
        </ul>
    </li>
    <li>
        Support
        <ul>
            <li>
                <h1>
                    Need help?
                </h1>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
        </ul>
    </li>
</ul>

CSS

#contentBox { position: relative; font-size: 80%; }
#contentBox > li
{
    display: inline;
    padding: 6px;
    margin: 0 1px;
    cursor: pointer;
}
#contentBox > li:hover, #contentBox ul
{
    border: 1px solid #CCC;
    background-color: #FFF;
}
#contentBox > li:hover {
    border-bottom: 2px solid #fff;
}
#contentBox > li:hover {
    border-bottom-color: #FFF;
    margin: 0;
}
#contentBox > li:hover ul
{
    display: block;
}
#contentBox ul
{
    position: absolute;
    display: none;
    border-width: 1px;
    width: 500px;
    padding: 6px;
    cursor: default;
    margin-top: 6px;
    z-index: -1;
}