JSFiddle - React, Tailwind, and code Playground

by Mukul kant

HTML

<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Menu 1
    <ul>
        <li>Stuff</li>
        <li>More stuff</li>
        <li>And more</li>
    </ul></li>
<li>Things
    <ul>
        <li>More</li>
        <li>Today</li>
        <li>Ideas</li>
    </ul></li>

CSS

ul#menu {
    list-style: none;
    /*margin-top: -50px;*/
    text-align: right;
    /*margin-left: 420px;*/
    float:right
}
ul#menu li {
    float: left;
    display: inline;
    text-align:left;
}
li {
    width: 110px;
}
ul#menu li a{
    display: inline;
    background:white;
    text-decoration: none;
}
ul#menu li a:hover{
    width:120px;
    color: black;
    background:white;
}
ul#menu li ul {
    display: none;
        padding:0;
    margin:0;
        float:left
  
}
ul#menu li:hover ul {
    display: block; /* display the dropdown */

}
ul#menu li:hover ul li {
    background: white;
    display: block;
    text-align:left;