How to Hide & Show by Clicking/Hovering Custom Sub-menu

Hi,

Welcome again to this wonderful topic that How to add option of custom menu item’s sub-menu or dropdown menu  to Hide and Show. Sometimes we make custom menus and also add some dropdown menu or sub-menu which we want to hide and open by clicking or hovering. We can easily make this option by some jQuery code.

I’m showing here the clicking option, you can make it hover option by changing the code from click to hover.

For clarity see the HTML code below,

<div id="nav">
<ul>
<li class="active"><a href="#">home</a></li>
<li><a href="#">services</a>

<!-- the submenu -->
<ul>
<li><a href="#">submenu 1</a></li>
<li><a href="#">submenu 2</a></li>
<li><a href="#">submenu 3</a></li>
<li><a href="#">submenu 4</a></li>
</ul>
</li>
<li><a href="#">about</a></li>
</ul>
</div>

Now add the jQuery  code like below,

jQuery('#nav li:has("ul")').click(function(){
jQuery(this).children('ul').slideToggle();
});

Now see the Wonderful effect of slide-down and hide the sub-menu.