JSFiddle - React, Tailwind, and code Playground

by octatone

HTML

<ul id="menu">
    <li><a href="#">home</a></li>
    <li><a href="#">one</a>
        <ul>
            <li><a href="#">sub 1</a></li>
            <li><a href="#">sub 2</a></li>
        </ul>
    </li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
</ul>

CSS

#menu {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    /* wire frame */
    border: 1px solid green;
}

/* clear floats (wrap #menu around list items)*/
#menu:after
{
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
}

#menu li {
    float: left;
    position: relative;
    padding: 10px 0;
}

#menu a {
    float: left;
    height: 25px;
    padding: 0 25px;
}

#menu li:hover > ul
{
        display: block;
}

/* sub */
#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 45px; /* push below main listing */
    left: 0;
    z-index: 99999;
    border: 1px solid blue;
}

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;
}

#menu ul a
{
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
}

/* nipple */
#menu ul li:first-child a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid blue;
}