Jquery Slide down Not working for ul li structure - php

Question

i have ul li structure like below
<ul class="lft_mnu" id="menu-main-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-261 current_page_item menu-item-276" id="menu-item-276">
COMPANY HISTORY
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-287" id="menu-item-287">
Sample 1</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-286" id="menu-item-286">
Sample 2</li>
</ul>
</li>
</ul>
i am using below javascript for showing the li sub tab ul with classname sub-menu
<script type="text/javascript">
$('li.menu-item').mousehover(function () {
$('ul.sub-menu').slideDown('medium');
});
$('li.menu-item').mouseleave(function(){
$('ul.sub-menu').slideUp('medium');
});
</script>
i need to show <ul classname="sub-menu"> when i mousehover on <li classname="menu-item"> .
How can i do this?...

Answer 1

Try this:
<script type="text/javascript">
$(function(){
$('li.menu-item ul.sub-menu').hide();
$('li.menu-item').hover(function () {
$('ul.sub-menu', this).slideDown('medium');
}, function(){
$('ul.sub-menu', this).slideUp('medium');
});
});
</script>

Answer 2

One thing that you can change is there is no event like mousehover you need to change it to mouseover. The other thing that you need to note is that your child LI's are also having class menuItem so when the mouse mouses over them there also you will see the sliding behaviour which you might not want. Please check and then you might need to do some more modifications.