I have a structured menu with nested lists for sub menus
<nav>
<ul>
<li class="itm">A
<ul>
<li>One</li>
<li>Two
<ul>
<li>Menu Item 1</li>
<li> Menu Item 2 </li>
<li> Menu Item 3 </li>
</ul>
</li>
<li> Three </li>
<li> Four </li>
</ul>
</li>
<li class="icon"><span class="img"></span></li>
<li class="itm">B</li>
<li class="itm">C</li>
</ul>
</nav>
When hovering over a parent li, I want to display the corresponding sub menu. This is how I'm trying to achieve it:
$('nav ul li').hover(function () {
console.log(this);
$(this).find('ul').fadeIn();
}, function () {
$(this).find('ul').fadeOut();
});
However, when hovering, I encounter this error in the JS Console:
Uncaught ReferenceError: ul is not defined