JSFiddle - React, Tailwind, and code Playground

by kboucher

HTML

<div class="Menu">
    <li id="item1">
    High level Item 1
    <div class="Submenu">
        <div>
               Nested Item 1         
        </div> 
        <div>
               Nested Item 2       
        </div>         
    </div>
    </li>  

    <li id="item2">
        High level Item 2
        <div class="Submenu">
            <div>
                   Nested Item 3         
            </div> 
            <div>
                   Nested Item 4       
            </div>         
        </div>
    </li> 
</div>

CSS

#item1, #item2 {        
   background-color:#efefef;           
   display:inline;
   font-size:14px;
   margin-right:3px; 
   padding:5px; 
}

.Submenu {
    display: none;
    padding: 4px; 
    margin-top:18px;
    background-repeat:no-repeat;
}  

.Menu li { position: relative; }

.Menu li:hover .Submenu{
    background-color:orange;
    display:inline;
    color: black;
    padding: 3px 5px;
    position:absolute;
    left:0;
}