jQuery drop down question...

Question

I'm writing my own simple drop-down...and it's not going so well.

I need only the direct child of the list that's being hovered over to slide down.

Also, it needs to stay down if the user is over the link OR the sub-menu.

Thanks for the help!!!

My basic HTML:

            <ul>
                <li class="media drop-down"><a href="#">Link</a>
                    <ul class="sub-menu">
                     <li>
                     This is stuff!
                     </li>
                    </ul>
                </li>
            </ul>

My jQuery

$('.sub-menu').hide();
var menu = $('.drop-down').children('ul');
var down = function (x) {menu.stop().slideDown(); }
var up = function (x) {menu.stop().slideUp(); }
$("li.drop-down").hover(down, up);//show/hide buttons

Answer 1

This should do it - note the context as the second parameter to $.

$('.sub-menu').hide();
var down = function (x) {$('ul.sub-menu', this).stop().slideDown(); }
var up = function (x) {$('ul.sub-menu', this).stop().slideUp(); }
$("li.drop-down").hover(down, up);//show/hide buttons

Answer 2

This line

var menu = $('.drop-down').children('ul');

returns a set of all ul elements which are direct children of elements with the class 'drop-down'. What you probably want to do is include the following in each of your up and down functions instead:

var menu = $(this).children('ul');