Question

hello friends i have tryied folowing code as u can see here http://jsfiddle.net/QCdz4/ i want to code for drop down menu to appear on click() and disappear when mouseout() but its not working please help me out Thank in advance

Jquery

<script>
    $(document).ready(function(){
        $('.click ul').css({display:'none', position:'absolute'});
        $('.click').click(function() {
            $(this).children('ul').slideDown(200);
            $(this).on('mouseout', function() {
                $(this).children('ul').slideUp(200);
            })
        })
    })
</script>

HTML

<div class="click">
    click
    <ul>
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
        <li><a href="#">four</a></li>
    </ul>
</div>

Answer 1

You need mouseleave instead of mouseout because mouseout will also be triggered when you hover from the parent to a child element. The child element positioned above (read: z-index) the parent. Moving the cursor in this case from parent to child element will trigger the mouseout event but not the mouseleave event. The mouseleave element will only be triggered when you move the cursor away from the parent AND it’s children.

$(document).ready(function(){

   $('.click ul').css({display:'none', position:'absolute'});


   $('.click').on('click', function(){
       $("ul", $(this)).slideDown(200);
   }).on('mouseleave', function(){
       $("ul", $(this)).slideUp(200);
   });   


})

Update: A very good article with a very clear live demo can be found here: Different between mouseout and mouseleave in jquery.
(Check out the the square’s with child elements. The one on the bottom right)