Make menu sublinks appear when hovering over the link

Question

My site is londontradition.com I am trying to get the menu links 'about us' and 'journal' to show the sublinks when a mouse is hovered above. Any help is appreciated.

Here is the code for the part of the menu I need this effect to work on.

<li id="menu-item-749" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub open"><a href="#"><span>About us</span>
</a><ul style="display: block;">
<li id="menu-item-1006" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.londontradition.com/about-us/history/"><span>HISTORY</span></a></li>
<li id="menu-item-1007" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.londontradition.com/about-us/heritage/"><span>HERITAGE</span></a></li></ul><span class="holder"></span></li>

Answer 1

You can do that with css.

Try somthing like this:

.parent:hover {
  .child {
    display: block;
  }
}

Answer 2

There are several ways to do this, css and javascript. I find the easiest way is with CSS.

.subMenu {display:none;}
.menuItem:hover .subMenu{ display:block;}

Answer 3

First you have to hide you children menu by display:none . After that you can trigger the parent menu using :hover in CSS and display:block for the child menu there. This should open the submenu by hovering.

Here is an example:

 .menu-children { display: none; } .menu-item-has-children:hover .menu-children { display: block; } 

 <li id="menu-item-749" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub open"><a href="#"><span>About us</span> </a> <ul class="menu-children"> <li id="menu-item-1006" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.londontradition.com/about-us/history/"><span>HISTORY</span></a> </li> <li id="menu-item-1007" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.londontradition.com/about-us/heritage/"><span>HERITAGE</span></a> </li> </ul><span class="holder"></span> </li> 

Please notice to give your child menu ul list the class menu-children (as example in this code snippet)

Update

I noticed your page is using a JavaScript, which sets the display parameter. That's why you need to change your JavaScript or you can try the following CSS:

.menu-children {
  display: none !important;
}
.menu-item-has-children:hover .menu-children {
  display: block !important;
}

Look at the !important tags for the display parameters in the CSS.

Answer 4

Hmmm, ok nobody has looked at the page...

It is simply a selector-thing in your code is this selector written to hide all submenus.

#mobile-menu ul ul {
    display: none;
    ...
}

So you have to write an selector like this with an higher priority to show the submenu on hover.

#mobile-menu ul li:hover > ul {
    display: block;
}

You can read an article about selector-priorty here: https://css-tricks.com/specifics-on-css-specificity/

---

But now you got another problem, you have an Javascript function that show and hide the submenu and this collides with the :hover :

$('body').on('click', '.holder', function() {
   ... do hide and show things ...
});

So you have to add an ugly !important to your code that overwrites the inline style from the Javascript function on hover ( style="display:none; ):

#mobile-menu ul li:hover > ul {
    display: block !important;
}

A better way would be to edit the function and add a new leave function too:

$('body').on('click mouseenter', '.holder', function() {
   ... do show (and hide on click) thing ...
});

and

$('body').on('mouseleave', '.has-sub', function() {
   ... do hide thing ...
});

The second function is on the complete <li class="... has-sub ..."> with submenu to get a chance to klick the submenu ;-)