JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<div id="menu">
    <ul id="nav">
        <li><a href="#" target="_self" >Main Item 1</a></li>
        <li><a href="#" target="_self" >Main Item 2</a>
            <ul>
                <li><a href="#" target="_self" >Test Sub Item</a></li>
                <li><a href="#" target="_self" >Test Sub Item</a></li>
                <li><a href="#" target="_self" >Test Sub Item</a></li>
                <li><a href="#" target="_self" >Test Sub Item</a></li>
                <li><a href="#" target="_self" >SUB SUB LIST >></a>
                    <ul>
                        <li><a href="#" target="_self" >Sub Sub Test Item 1</a>
                        <li><a href="#" target="_self" >Sub Sub Test Item 2</a>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#" target="_self" >Main Item 3</a></li>
    </ul>
</div>

CSS

#menu {
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
}

#nav {
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    float:left;
    text-align:center;
    }

#nav li {
    display:inline-block;
    position:relative;
    float:left;
    background: #006633;
    }

#nav li a {
    display:inline-block;
    width:200px;
    line-height:35px;
    padding:0;
    text-decoration:none;
    color:#ffffff;
    }
    
#nav li li {float:left; #006633;}
    
#nav li li a {display:block;font-size:12px;}
    
#nav li:hover {background:#003f20;}

/*--- Sublist Styles ---*/
#nav ul {
    position:absolute;
    padding:0px;
    left:0;
    display:none;
    }

/*--- Hide Sub Sublists ---*/
#nav li:hover ul ul {display:none;}

/*--- Sublevel UL's display and position on hover ---*/
#nav li:hover ul {display:block;} 
#nav li li:hover ul {margin-left:200px; margin-top:-35px; display:block;}