JSFiddle - React, Tailwind, and code Playground

by Ganesh Salunkhe

HTML

<ul id="menu" >           
            <li><a href="#">&#10148; Visa</a>                
              <ul class="sub-menu">
                <ul>
                    <li>
                       <a href="LoadEmployeeVisa">Employee Visa</a>
                    </li>
                    <li>
                       <a href="#">Family Visa</a>
                    </li>                   
                </ul>
             </ul>
      </ul>

CSS

/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: decimal;

}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;

}
/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;

}
/*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 20px;
    left: 0;
}
ul#menu li:hover ul.sub-menu {
    display:block;
    margin:-1px;
}