JSFiddle - React, Tailwind, and code Playground

by BandonRandon

HTML

<script src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script>
    <div id="second-nav" class="home">
                
                
    
    <div id="menu-primary" class="menu-container">

        <div class="wrap">

            
            <div class="menu"><ul id="menu-primary-items" class="">
                <li id="menu-item-153" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-153"><a href="http://business.beegoodmarketing.com/about/">About</a>
<ul class="sub-menu">
    <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="http://business.beegoodmarketing.com/about/our-story/">Our Story</a></li>
    <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="http://business.beegoodmarketing.com/about/our-staff/">Our Staff</a></li>
    <li id="menu-item-48" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48"><a href="http://business.beegoodmarketing.com/about/contact-us/">Contact Us</a></li>
    <li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51"><a href="http://business.beegoodmarketing.com/about/careers/">Careers</a></li>
</ul>
</li>
<li id="menu-item-161" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-161"><a href="http://business.beegoodmarketing.com/services/">Services</a>
<ul class="sub-menu">
    <li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54"><a href="http://business.beegoodmarketing.com/services/organic-search-optimization-site-audits-recommendations/">Site Audits</a></li>
    <li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57"><a href="http://business.beegoodmarketing.com/services/paid-search/">Paid Search</a></li>
    <li id="menu-item-56" class="menu-item menu-item-type-post_type...

CSS

#menu-primary-items li {
    display:block;
    float:left;
    width:100px;
}

JavaScript

$("#menu-primary-items a").hover(function() {

  $(this).parent().append($(this));

});   

$("ul ul.sub-menu li").css('display','none');
$("#menu-primary-items li").hoverIntent(
  function() {
    $(this).find('ul.sub-menu  li').stop(true, true).slideDown();
}, function() {
     $(this).find('ul.sub-menu  li').stop(true, true).slideUp();
}

);