JSFiddle - React, Tailwind, and code Playground

by richardneililagan

HTML

<nav>
    <ul>
        <li><a>foo</a></li>
        <li>
            <a>foo</a>
            <ul>
                <li>bar</li>
                <li>bar</li>
                <li>bar</li>
                <li>bar</li>
            </ul>
        </li>
        <li><a>foo</a></li>
        <li><a>foo</a></li>
    </ul>
</nav>

CSS

nav { position:relative; }
nav ul { padding:0; margin:0; background-color:rgba(255,0,0,.2); }
nav li { 
    list-style:none; background-color:rgba(255,0,0,.2);     
    float:left;
}
nav li a { 
    display:block; 
    padding:10px 30px;
    border:1px solid #f00;
}
nav > ul > li > ul > li {
    float:left;
}

nav ul ul {
    width:300px;
    height:200px;
    position:absolute;
    display:none;
}


nav li:hover ul {
    display:block;
}