JSFiddle - React, Tailwind, and code Playground

by Emre Erkan

HTML

<nav><!-- top nav -->

        <div class="topmenu">
            <ul class="section_list">
    <li><a class="active" href="http://www.qualprnt.com/clients/fbcw/">Home</a></li>
    <li><a href="http://www.qualprnt.com/clients/fbcw/about/">About</a></li>
    <li><a href="http://www.qualprnt.com/clients/fbcw/ministries/">ministries</a></li>
    <li><a href="http://www.qualprnt.com/clients/fbcw/news/">news</a></li>
    <li><a href="http://www.qualprnt.com/clients/fbcw/sermons/">sermons</a></li>

    <li><a href="http://www.qualprnt.com/clients/fbcw/contact/">contact</a></li>
</ul>
        </div>        
        <div class="submenu">
            <ul class="category_list about">
    <li><a href="http://www.qualprnt.com/clients/fbcw/about/?c=join-us">join us</a></li>
    <li><a href="http://www.qualprnt.com/clients/fbcw/about/?c=our-beliefs">our beliefs</a></li>
    <li><a href="http://www.qualprnt.com/clients/fbcw/about/?c=our-staff">our staff</a></li>

    <li><a href="http://www.qualprnt.com/clients/fbcw/about/?c=services">services</a></li>
</ul>
            <ul class="category_list ministries">
    <li><a href="http://www.qualprnt.com/clients/fbcw/ministries/?c=adults">adults</a></li>
    <li><a href="http://www.qualprnt.com/clients/fbcw/ministries/?c=children">children</a></li>
    <li><a href="http://www.qualprnt.com/clients/fbcw/ministries/?c=preschool">preschool</a></li>
    <li><a href="http://www.qualprnt.com/clients/fbcw/ministries/?c=youth">youth</a></li>

</ul>
        </div>
    </nav><!-- end of top nav -->

CSS

li { float: left; padding: 10px; }
.submenu { clear: left; }
.submenu ul { display: none; }

JavaScript

$(document).ready(function() {
  var root = 'http://www.qualprnt.com/clients/fbcw/', $submenu = $('.submenu ul');
  $submenu.hide();
  var current = ''; //location.href.replace(root, '').split('/')[0];
  if(current != '') {
    $submenu.filter('.' + current).show();
  }
  $('.topmenu a').mouseenter(function(){
    var section = this.href.replace(root, '').split('/')[0];
    $submenu.hide();
    if(section != '') {
      $submenu.filter('.' + section).show();
    }
    else {
      if(current != '') {
        $submenu.filter('.' + current).show();
      }
    }
  });
});