JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<script src="http://www.vibiga.com/templates/vibiga/js/jquery-ui-1.10.4.min.js"></script>
<ul class="mainmenu">
    <li><a href="#">home</a></li>
    <li><a href="#">item 1</a></li>
    <li>
        <a href="#">Submenu</a>
        <ul>
            <li><a href="#">sub 1</a></li>
            <li><a href="#">sub 2</a></li>
            <li><a href="#">sub 3</a></li>
            <li><a href="#">sub 4</a></li>
            <li><a href="#">sub 5</a></li>
        </ul>
    </li>
</ul>

CSS

a { text-decoration: none; }
ul { margin: 0px; padding: 0px; list-style-type: none; }

ul.mainmenu li { float: left; display: inline; margin-left: 15px; }

ul.mainmenu li a { display: block; padding: 3px 10px; background-color: #cccccc; color: #000000; }

ul.mainmenu li ul { display: none; }
ul.mainmenu li ul li { float: none; display: block; }

JavaScript

$('ul.mainmenu > li').hover(
        function() {
            $(this).children('ul').show('fold', 570);
        }, function() {
            $('ul:not(.mainmenu)').hide('fold', 500);
           
        }
    );