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">
      <a href="http://apptivowp.apptivo.com/company-history/">COMPANY HISTORY</a>
      <ul class="sub-menu">
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-287" id="menu-item-287">
              <a href="http://apptivowp.apptivo.com/company-history/sample-1/">Sample 1</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-286" id="menu-item-286">
              <a href="http://apptivowp.apptivo.com/company-history/sample-2/">Sample 2</a></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>