Add hover effects to mmenu

Question

Thanks to previous help with mmenu, I now have it working mostly as I want. It's been a crash course in CSS for me! However, I'd like to add a hover effect to mmenu (background to a menu item changes colour). There's no problem doing this with single-level items, which are just a links, but if I apply a hover effect to items that open a second-level menu (those with right-pointing arrow) the hover colour hides the text. Is there a solution using CSS?

Geek Geek · Accepted Answer · 2015-12-18T13:53:01

Hopefully this may be of some use to you...

There are a couple of methods to add hover effects. Examples would be for a menu with 3 options

.mm-listview > li:nth-child(1):hover {
   background-color:#ff6600;
}

.mm-listview > li:nth-child(2):hover {
   background-color:#990066;
}

.mm-listview > li:nth-child(3):hover {
   background-color: #c5215d;
}

This would change the background colour when hovered over, but this will apply to any sub menus as well.

So if you want to target just one li then apply a class to it with the following setup.

.menu-customnamegoeshere > :nth-child(1):hover {
   background-color:#00cc99;
}

HTH

Add hover effects to mmenu

1 Answers