JSFiddle - React, Tailwind, and code Playground

by Shuping Liu

HTML

<ul id="navi">
    <li><a href="" class="active">LInk 1</a></li>
    <li><a href="">LInk 2</a>
        <ul class="subnavi">
            <li><a href="">LInk 1</a></li>
            <li><a href="">LInk 1</a></li>
            <li><a href="">LInk 1</a></li>
            <li><a href="">LInk 1</a></li>
            <li><a href="">LInk 1</a></li>    
        </ul>
    
    </li>
    <li><a href="">LInk 3</a></li>
    
    <div class="cl"></div>
</ul>

CSS

.cl{clear:both;}
#navi{
    background:#0082c8;
    position:relative;
    margin-top:15px;
}


#navi > li{
    float:left;
    margin:0 10px;
    position:relative;
    padding:14px 0;
}

#navi li a, .subnavi li a{
    color:white;
    text-decoration:none;
    display:inline-block;
    line-height:29px;
    padding:0 13px;
    font-size:16px;
    font-family:arial;
    text-shadow: 0px 2px 2px #034e9f;
    filter: dropshadow(color=#034e9f, offx=0, offy=2); 
}

#navi > li:hover > a, li:hover > a , #navi li a.active{
    background:#055c9f;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
    -webkit-box-shadow: inset 0px 3px 3px 0px #042960;
    -moz-box-shadow: inset 0px 3px 3px 0px #042960;
    box-shadow: inset 0px 3px 3px 0px #042960;
    border:1px solid #009ada; 
    color:#f7cf00;
    line-height:27px;
    padding:0 12px;               
}

.subnavi{
    position:absolute;
    display:none;
    top:51px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
    -webkit-box-shadow: 0px 0px 3px 1px #979395;
    -moz-box-shadow: 0px 0px 3px 1px #979395;
    box-shadow: 0px 0px 3px 1px #979395; 
    background:#0082c8;
    border:1px solid #005890;
    padding:10px 0;
    white-space:nowrap;
}

#navi li:hover .subnavi{
    display:block;
    
}
#navi .subnavi li{
    margin:0;
}
#navi .subnavi li a{
    display:block;
    font-size:13px;
    padding:0 15px;
    border-radius:0;
    line-height:27px;
}
#navi .subnavi li a:hover{
    padding:0 15px;
    border-radius:0;
    border-left:0;
    border-right:0;
    line-height:25px;
}