CODEWITHSUNDEEP
htmlcssmenuhover
Kumar Patel
Kumar Patel

Reputation: 83

Make menu sublinks appear when hovering over the link

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>

Upvotes: 1

Views: 2914

Answers (4)

Felix G.
Felix G.

Reputation: 6691

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.

Upvotes: 1

Andr&#233;le
Andr&#233;le

Reputation: 336

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 ;-)

Upvotes: 0

MichaelG
MichaelG

Reputation: 737

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;}

Upvotes: 0

Nicolas Castellanos
Nicolas Castellanos

Reputation: 937

You can do that with css.

Try somthing like this: 

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

Upvotes: 0

Related Questions