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;
}
ul#menu li {
    float: left;
    text-align: right;
    display: inline;
}
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;
    margin:0;
    padding:0
}
ul#menu li:hover ul {
    display: block; /* display the dropdown */
}
ul#menu li:hover ul li {
    background: white;
    display: block;
    text-align: left;
    padding: 5px;
}