JSFiddle - React, Tailwind, and code Playground

by Andrew Lyndem

HTML

<nav>
  <ul class="nav-categories discover-active">
    <li class="nav-category-and-subnav discover">
      <div id="discover" class="nav-category">
        <span class="nav-category-padding">Discover</span>
        <p>
        SVG here
        </p>
        <div class="subnav">
          <p>
          IMG here
          </p>
          <p class="close">X</p>
        </div>
      </div>
    </li>
    <hr>
    <li class="nav-category-and-subnav watch">
      <div id="watch" class="nav-category">
        <span class="nav-category-padding">Watch</span>
       <p>
        SVG here
        </p>
        <div class="subnav">
          <div class="column">
            Original Series
          </div>
          <div class="column">
            Trending Videos
          </div>
          <p class="close">X</p>
        </div>
      </div>
    </li>
  </ul>
</nav>

CSS

.subnav { background: green;display: none;}

JavaScript

var discover = document.getElementById("discover");
var watch = document.getElementById("watch");
var close = document.querySelectorAll(".close");

function openSub(e) {
    var subNav = e.target.childNodes[5];
    var x = window.getComputedStyle(subNav);
    if (x.display == "none") {
    	subNav.style.display = "block";
    } else {
    	subNav.style.display = "none";
    }
}
function closeSub(e) {
    var subNav = e.target.childNodes[5];
    subNav.style.display = "none";
}

discover.addEventListener("mouseenter", openSub);
watch.addEventListener("mouseenter", openSub);

discover.addEventListener("mouseleave", closeSub);
watch.addEventListener("mouseleave", closeSub);

function btnSub(e) {
    e.target.parentElement.style.display = "none";
}

close.forEach(btn => {
btn.addEventListener("click", btnSub);
});