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