jQuery drop down list hover

Question

This is what I have come up with.

HTML

<ul class="treatment-menu">
    <li>Always visible menu</li>
       <ul class="nav-child">
          <li>Hidden menu</li>
       </ul>
</ul>

Hover function

$('.treatment-menu li').hover(function () {
        $(this).find('.nav-child').show();
    },
    function () {
        $(this).find('.nav-child').hide();
});

FIDDLE http://jsfiddle.net/HBMfB/3/

However I can not get the .navchild to display when .treatment-menu li is hovered.

Any ideas?

Thank you.

Answer 1

You can Just use Css for that

http://jsfiddle.net/PpYQS/

.nav-child {

    display:none;
}
.treatment-menu:hover .nav-child
{
    display:block;
}

If you are using jquery you can do a .toggle() instead of writing show() and hide()

http://jsfiddle.net/rbw8v/

$('.treatment-menu li').hover(function () {
        $(this).find('.nav-child').toggle();
    });

or .slideToggle() for slide effect.

$('.treatment-menu li').hover(function () {
        $(this).find('.nav-child').slideToggle();
    });