[Resolved] color of parent item changes when hovering over sub item

[Ines]

Hi!
I am experiencing a problem with menu colors: When I hover over a menu sub item the color and background of the parent item changes. See here: http://all-projekt.797.at – trigger the sub menu for the parent item “Sachgebiete” and hover over one of the sub items – the color and background of “Sachgebiete” change allthough they shouldn’t.
Could you please help?
Thanks in advance!
Ines

[Leo]

Hi there,

Can you comment out all the CSS you’ve added for the main navigation and see if it solves the issue?

/*Menue*/
div.inside-navigation{
	background-color: #FFFFFF;
	color:#545454;
	border-bottom: 1px solid #545454;
}

/*.main-navigation .main-nav ul li   > a:hover, 
.main-navigation .main-nav ul li   > a:focus{
	background-color: white;

}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	background-color: white;
}

main-navigation a, .menu-toggle, .site-description, .widget-title, h3 {
    text-transform: none;
	font-size: 16px;

}

a:visited {
    color: transparent;
}*/

/* MENU ITEMS */
.main-navigation {
	background-color: white;
}

.main-navigation .main-nav ul li a, 
.main-navigation .menu-toggle {
	color: #545454;
	background-color: white;
}

/* SUB-NAVIGATION */

.main-navigation .main-nav ul ul li a {
	background-color: white;
	color: #545454;
}

/* MENU ITEM HOVER */

.main-navigation .main-nav ul li > a:hover, 
.main-navigation .main-nav ul li > a:focus,
.main-navigation .main-nav ul li.sfHover > a {
	color: #c70000;
	background-color:white;
}

/* SUB-NAVIGATION HOVER */

.main-navigation .main-nav ul ul li > a:hover, 
.main-navigation .main-nav ul ul li > a:focus,
.main-navigation .main-nav ul ul li.sfHover > a {
	color: #c70000;
	background-color: white;
}

/* CURRENT ITEMS */

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: #c70000;
	background-color: white;
}

.main-navigation .main-nav ul li[class*="current-menu-"]:hover > a, 
.main-navigation .main-nav ul li[class*="current-menu-"]:focus > a, 
.main-navigation .main-nav ul li[class*="current-menu-"].sfHover > a {
	color: #c70000;
	background-color: white;
}

/* SUB-NAVIGATION CURRENT ITEMS */

.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
	color: #c70000!important;
	background-color: white!important;
}

.main-navigation .main-nav ul ul li[class*="current-menu-"]:hover > a, 
.main-navigation .main-nav ul ul li[class*="current-menu-"]:focus > a, 
.main-navigation .main-nav ul ul li[class*="current-menu-"].sfHover > a {
	color: #c70000!important;
	background-color: white!important;
}

.main-navigation .main-nav ul ul .current-menu-item > a:hover,
.main-navigation .main-nav ul ul .current-menu-parent > a:hover {
    background: white!important;
    color: #c70000!important;
}

Don’t think you need a lot of those CSS either as they should be in the customizer options:
https://docs.generatepress.com/article/colors-overview/

[Ines]

Hi Leo!
Unfortunately I am not using Generatepress Premium on this project, so it’s not possible for me to configure the color options of the menu items in the customizer.
I commented out all CSS-parts related to the main-nav but this only leaves me with a black background / white font menu which seems to be the default menu design for Generatepress.
My problem posted above seems to be that the default design is still used for this current parent item after applying my CSS.

[Leo]

Replace:

.main-navigation {
    background-color: white;
}

with:

.main-navigation, .main-navigation ul ul {
    background-color: #fff;
}

[Ines]

Thank you! I just tried that, but nothing changed…
Any other ideas?

[David]

The hover selector in the customiser targets the <li> like so:

.main-navigation .main-nav ul li:hover > a

Your CSS is targeting the <a>

.main-navigation .main-nav ul li > a:hover

Try updating them to the customiser selectors.

[Ines]

Hi David!
Thank you so much! It’s working now!

[David]

You’re welcome

[Author]

Posts