CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user971741
user971741

Reputation:

Display nested list over hovering at parent list

I have a menu structure in which sub menus are present as nested lists like this

<nav>
<ul>
<li class="itm">A
    <ul>
        <li>One</li>
        <li>Two
            <ul>
                <li>Menu Item</li>
                <li> Menu Item </li>
                <li> Menu Item </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>

Nowi want to show the sub menu (sub list) when the cursor hovers over the parent li and for that I am doing this:

$('nav ul li').hover(function () {
    console.log(this);
    $(this > ul).fadeIn();
}, function () {
    $(this > ul).fadeOut();
});

But on hover it showing this error in JS Console: Uncaught ReferenceError: ul is not defined

Upvotes: 0

Views: 707

Answers (1)

Jason P
Jason P

Reputation: 27022

Your selector is combining this, which is a literal, and what should be a string in a selector (> ul). ul is being treated as a variable, and the ul variable doesn't exist.

Try this:

http://jsfiddle.net/cyzsw/

$(this).children('ul').fadeIn();

Upvotes: 1

Related Questions