JSFiddle - React, Tailwind, and code Playground

by davidpauljunior

HTML

<div style="width: 100%">
    <ul id="horizontal-style">
        <li>
            <a href="#">Nav Item</a>
            <ul>
                <li>sub nav item</li>
                <li>sub nav item</li>
                <li>sub nav item</li>
            </ul>
        </li>
        <li>
            <a href="#">Short Item</a>
            <ul>
                <li>sub nav item</li>
                <li>sub nav item</li>
                <li>sub nav item</li>
            </ul>
        </li>
        <li>
            <a href="#">Really Long Nav Item</a>
            <ul>
                <li>sub nav item</li>
                <li>sub nav item</li>
                <li>sub nav item</li>
            </ul>
        </li>
    </ul>
</div>

CSS

#horizontal-style {
    display: table;
    width: 100%;
}
#horizontal-style > li {
    display: table-cell;
    position: relative;
}
#horizontal-style >li a {
    display: block;
    border: 1px solid red;
    text-align: center;
    margin: 0 0px;
    background: #999
}

#horizontal-style > li ul {
    position: absolute;
    display: none;
    width: 100%;
}

#horizontal-style > li ul li {
    background: lightBlue;
}

#horizontal-style > li:hover ul {
    display: block;
}