Question

I am having trouble with this menu, when I hover to the subcategories they keep slideup.

I want the subcategories to remain when I hover it and when I move my mouse outside it will slideup, same go to the main categories. Please help. I had been working on this for 1 hour but no solution.

$(document).ready(function(){
 $('ul#level1').slideUp();
       $('a#tab').hover(function(){
                 var content_show = $(this).attr('title');
                $('.'+ content_show).stop().slideDown();

            },function(){


                var content_show = $(this).attr('title');
                $('.'+ content_show).stop().slideUp();


            });
 });





                <li><a href="#" id="tab" class="active" title="one">Sport</a>

                    <ul id="level1" class="one">
                    <li><a href="#">View All</a></li>
                    <li><a href="#" >Shoes</a></li>
                    <li><a href="#" >T-Shirt</a></li>
                    <li><a href="#" >Tools</a></li>
                    <li><a href="#" >Hats</a></li>
                    <li><a href="#">Pants</a></li>
                    </ul>


                </li>

                <li><a href="#" id="tab" class="tab" title="two">Foods</a>

                    <ul id="level1" class="two">
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    </ul>


                </li>

Answer 1

Try to slide your <li> not your <a> DEMO : http://jsfiddle.net/yosafatade/VNkbp/

Actually I agree with @PraveenKumar but if you are still want to use jquery I recommend you to use slideToggle()