JSFiddle - React, Tailwind, and code Playground

by Yuan Hong

HTML

<ul id="menu">
    <li><span>Menu 1</span>
        <ul>
            <li><span>Submenu1.1</span></li>    
            <li><span>Submenu2.1</span></li>    
        </ul>
    </li>
    <li><span>Menu 2</span>
        <ul>
            <li><span>Submenu2.1</span></li>    
            <li><span>Submenu2.2</span></li>    
        </ul>    
    </li>
    <li><span>Menu 3</span>
        <ul>
            <li><span>Submenu3.1</span></li>    
            <li><span>Submenu3.2</span></li>    
        </ul>
    </li>    
</ul>

CSS

ul{    
    list-style:none;
    
}

ul li{
    display:block;
    position:relative;
    list-style:none;
    background-color:#5C0000;
    margin-top:1px;
    width:100px;
    height:25px;
    color:#FFF;
    text-align:center;
    padding:15px;   
}

ul li:hover{
    display:block;
    transition-property:all;
	-moz-transition-property: all; /* Firefox 4 */
	-webkit-transition-property:all; /* Safari and Chrome */
	-o-transition-property:all; /* Opera */
	transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s; /* Safari */
	transition-timing-function: linear;
	-webkit-transition-timing-function: linear; /* Safari and Chrome */
     color:#000;
    background-color:#E69980;
    
}
ul li span a{
   display:block;
}

li ul{
    display:none;
}

li:hover ul{
    display:block;
    position:absolute;
    margin-left:80px;
    margin-top:-34px;
}

li:hover ul li{
    transition-property:all;
	-moz-transition-property: all; /* Firefox 4 */
	-webkit-transition-property:all; /* Safari and Chrome */
	-o-transition-property:all; /* Opera */
	transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s; /* Safari */
	transition-timing-function: linear;
	-webkit-transition-timing-function: linear; /* Safari and Chrome */    
}