JSFiddle - React, Tailwind, and code Playground

by BandonRandon

HTML

<script src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script>
<ul>
    <li>
    <ul>
        <li> Menu 1 </li>
        <li> Menu 2 </li>
    </ul>
    </li>
        <li> Main Menu Item </li>
</ul>
<ul>
        <li>
    <ul>
        <li> Menu 1 </li>
        <li> Menu 2 </li>
    </ul>
  </li>
        <li> Main Menu Item 2 </li>
</ul>

CSS

ul ul li {
    display: none; 
    width:130px;
    height:40px;
}

ul {
    display:inline;
    float:left;
    width:150px;
}

JavaScript

$("ul").hoverIntent(
function() {
    $(this).find('ul li').stop(true, true).slideDown();
}, function() {
     $(this).find('ul li').stop(true, true).slideUp();
}

);