JSFiddle - React, Tailwind, and code Playground

by karin

HTML

<ul id="menu">
    <li><a href="#">Item1</a>

        <ul class="submenu">
            <li><a href="#">sub-item1</a>
            </li>
            <li><a href="#">sub-item2</a>
            </li>
            <li><a href="#">sub-item3</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Item2</a>

        <ul class="submenu">
            <li><a href="#">sub-item21</a>
            </li>
            <li><a href="#">sub-item22</a>
            </li>
            <li><a href="#">sub-item23</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Item3 </a>

        <ul class="submenu">
            <li><a href="#">sub-item31</a>
            </li>
            <li><a href="#">sub-item32</a>
            </li>
            <li><a href="#">sub-item33</a>
            </li>
        </ul>
    </li>
</ul>

CSS

#menu {
    background-color:#206676;
    float:left;
    width:100%;
    height:60px;
}
ul#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: left;
}
ul#menu li {
    display: inline;
    list-style: none;
    padding-left: 15px;
    float:left;
    position:relative;
}
ul#menu li a {
    background: none;
    color: #FFF;
    text-decoration: none;
}
ul#menu li a:hover {
    color: #FFF;
    text-decoration: none;
}
ul#menu ul {
    display:none;
    position:absolute;
    left:-20px;
    top:20px;
}
ul#menu li {
    display:block;
}
ul#menu li:hover ul {
    display: block;
    width:150px;
}
ul#menu li:hover ul li a {
    display: block;
    color:red;
}

JavaScript

/*$(function () {
    $('ul li >  ul li').hide();
    $('ul li').click(function () {
        $('ul li >  ul li').fadeIn(500);
    });
    $('ul li').mouseleave(function () {
        $('ul li >  ul li').fadeOut(500);
    });
});
*/