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 */
}