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>
