JSFiddle - React, Tailwind, and code Playground

by Shanid

HTML

<ul class="nav pull-right" id="ddmenu">
    <li class="menu"><a href="#">Menu</a>
        <ul id="dropdown">
            <li><a href="#">Available courses</a></li>
        </ul>
    </li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">Menu</a></li>
    <li class="navbar-text"><a href="#">Menu</a></li>
    </ul>

CSS

#ddmenu > li:first-child ul{
   display: none;
   margin-left:1px;
   padding:10px 15px
   }
#ddmenu > li{
    position: relative;
    list-style: none;
}
#ddmenu > li a{
    padding: 5px;
    background: #ddd;
    display: block;
}
#ddmenu > li:hover ul{
   display: block;
   float:none;
   left: 50px;
   top: 0;
   position: absolute;
   list-style-type: none;   
   text-decoration:none;
    z-index: 999;
    padding:0;
   }
#ddmenu > li:hover ul li a{
   text-decoration:none;
   }
#ddmenu li ul{
    margin:0;
    padding:0;
}
#ddmenu li li a{
    background: red;
    padding: 5px;
    color: #fff;
    display: block;
}