JSFiddle - React, Tailwind, and code Playground

by BandonRandon

HTML

<nav id="verticalmenu">          
<ul>
  <li> 
      <ul class="down">
        <li><a href="#">Menu#1-1</a></li>
        <li><a href="#">Menu#1-2</a></li>
        <li><a href="#">Menu#1-3</a></li>
      </ul>
      <a class="slide" href="#">Menu#1</a>
  </li>
    <li>
       <ul class="down">
        <li><a href="#">Menu#2-1</a></li>
        <li><a href="#">Menu#2-2</a></li>
        <li><a href="#">Menu#2-3</a></li>
      </ul>
        <a class="slide" href="#">Menu#2</a>
    </li>
</ul>

JavaScript

var nav = $("#verticalmenu");
    //add hovers to submenu parents
    nav.find("li").each(function() {
        var li_ul = $(this).find("ul");
            li_ul.hide();
            //show subnav on hover
            $(this).mouseenter(function() {
                li_ul.stop(true, true).slideDown();
            });
    });


    nav.find("li").each(function() {
        var li_ul = $(this).find("ul");
            li_ul.hide();
            //show subnav on hover
            $(this).mouseleave(function() {
                li_ul.stop(true, true).slideUp();
            });
    });