JSFiddle - React, Tailwind, and code Playground

by Mr_Vasu

HTML

<ul>
    <li><a href="#">hello</a></li>
    <li id="frstdn"><a href="#">hello</a>
        <div id="drpdown">
            <ul>
                <li><a href="">hello</a></li>
    <li><a href="">hello</a></li></ul>
        </div>
    </li>
    <li><a href="#">hello</a></li>
    <li><a href="#">hello</a></li>
</ul>

CSS

ul{margin:0;padding:0;list-style:none;display:block;}
ul li{
   display:inline-block;
   
    float:left;
    margin:0 10px;
    
}
ul li a{
    margin:0;padding:5px 10px;
    background:#ddd;
    text-decoration:none;
    display:inline-block;
   
}
ul li a:hover{
   background:#ccc;
}
ul li:hover #drpdown{
    display:block;
}
#drpdown{
    margin:5px 0;
display:none;
    position:absolute;
    top:34px;
}