title: Show / hide submenu in Wordpress
body: <p>I have created simple menu:</p>
  
  <pre><code>                    &lt;ul class="menu-btn"&gt;
                          &lt;a href="#"&gt;&lt;li&gt;Lorem ipsum dolor&lt;/li&gt;&lt;/a&gt;
                          &lt;a href="#"&gt;&lt;li&gt;Sit amet, consectetur&lt;/li&gt;&lt;/a&gt;
                          &lt;a href="#"&gt;&lt;li class="current-page-item"&gt;Adipiscing elit&lt;/li&gt;
                          &lt;/a&gt;
                              &lt;ul class="sub-menu"&gt;
                                  &lt;a href="#"&gt;&lt;li&gt;Lorem ipsum dolor&lt;/li&gt;&lt;/a&gt;
                                  &lt;a href="#"&gt;&lt;li&gt;Sit amet, consectetur&lt;/li&gt;&lt;/a&gt;
                                  &lt;a href="#"&gt;&lt;li&gt;Adipiscing elit&lt;/li&gt;&lt;/a&gt;
                              &lt;/ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Quisque sed eros vehicula&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Sit amet, consectetur&lt;/a&gt;&lt;/li&gt;                                       
                      &lt;/ul&gt;
  </code></pre>
  
  <p>I want to show and hide sub-menu class after hovering on parrent <code>&lt;li&gt;</code> element. </p>
  
  <p>Jquery:</p>
  
  <pre><code>jQuery(document).ready(function(){
  /* navigation sub-menu display */
  
  // Change 'hover' to 'click' if you want to
  jQuery('.menu-btn &gt; .sub-menu').parent().hover(function() {
    var submenu = jQuery(this).children('.sub-menu');
    if ( jQuery(submenu).is(':hidden') ) {
     jQuery(submenu).slideDown(200);
     } else {
     jQuery(submenu).slideUp(200);
    }
  });
  
  });
  </code></pre>
  
  <p>Now the menu is show / hide but not properly. Because it show/hide <code>sub-menu</code> class when I hover on each <code>&lt;li&gt;</code> element of the <code>menu-btn</code> class. </p>