JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu" class="nav-menu">
    <li>Home</li>
    <li class="top-menu"><a href="#">About Us</a>
        <ul id="submenu" class="sub-menu non-active">
            <li>Ashley + David</li>
            <li>Our Style</li>
            <li>The Experience</li>
        </ul>
    </li>

    <li class="top-menu">
        <a href="#">Galleries</a>
            
        <ul id="submenu" class="sub-menu non-active">
            <li>Weddings</li>
            <li>Engagements</li>
            <li>Featured Weddings</li>
        </ul>
    </li>
    <li class="top-menu">
        <a href="#">The Details</a>
            
        <ul id="submenu" class="sub-menu non-active">
            <li>Investment</li>
            <li>Press and Awards</li>
            <li>Testimonials</li>
        </ul>
    </li>
    <li>FAQ</li>
    <li>Contact</li>
    <li>The Blog</li>
</ul>

CSS

.nav-menu {
    list-style-type:none;
    text-align:center;
    text-transform:uppercase;
    font-weight:bold;
    font: 24px'Playfair Display', Georgia, serif;
}
.navmenu ul li {
    margin:30px;
}
.non-active {
    display:none;
}
.active {
    display:inline;
}

JavaScript

$('.top-menu').hover(
  function () {
    $(this).find('.sub-menu').show("slow");
  },
  function () {
    $(this).find('.sub-menu').hide("slow");
  }
);