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


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">
<li class="active"><a href="#">home</a></li>
<li><a href="#">services</a>

<!-- the submenu -->
<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>
<li><a href="#">about</a></li>

Now add the jQuery  code like below,

jQuery('#nav li:has("ul")').click(function(){

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



  • Mizo Stone

    April 11, 2017

    Fantastic page, Keep up the excellent job. Many thanks!

  • Nick

    August 10, 2017

    Mostafiz, еhank you cery much for this script!

    But I have a problem. Everything works fine (closes and opens) but the default state of my menu is OPEN. What shall I do to have my menu CLOSED by default? Thank you.


Leave a Reply