JSFiddle - React, Tailwind, and code Playground
HTML
<div id="menu-wrapper">
<ul class="nav">
<li>
<a href="#">Category A</a>
<div class="block">
<h3>Category A</h3>
<div class="nav-column">
<ul>
<li><a href="#">Sub-Category</a>
<div class="sub-column">
<ul>
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
</ul>
</div>
</li>
<li><a href="#">Sub-Category</a>
<div class="sub-column">
<ul>
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
<li><a href="#">Link #4</a></li>
<li><a href="#">Link #5</a></li>
</ul>
</div>
</li>
<li><a href="#">Sub-Category</a>
<div class="sub-column">
<ul>
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
<li><a href="#">Link #4</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div class="home">
<h3>Featured Products</h3>
<div class="featured">
<p>Lorum Ipsum...</p>
</div>
</div>
</div>
</li>
<li><a href="#">Category B</a>
<div class="block">
<h3>Category B</h3>
<div class="nav-column">
<ul>
<li><a href="#">Sub-Category</a>
<div class="sub-column">
<ul>
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
</ul>
</div>
</li>
<li><a...
JavaScript
$(function(){
$(".nav > li > a").hover(function(){
var $home = $(this).next().find(".home");
var $subCol = $(this).next().find(".sub-column");
//alert($home.length);
alert($subCol.length);
});
});