Link padre non prende pseudo classe hover

[albenessereblog]

Questo è il sito: https://albertifoto.altervista.org

Nel menù a sinistra c'è il link Henry Cartier-Bresson e sotto il link figlio "...mentre scatta".
Se do il focus al link figlio, il link padre non prende più l'hover.

Questo è tutto il css:

/* Link del menù */
.home-menu,
.main-navigation a,
.widget ul li a,
.main-navigation ul li.current-menu-ancestor > a {
	color: #0083cd;
}
.home-menu:hover,
.main-navigation a:hover,
.widget ul li a:hover,
.widget_tag_cloud a:hover {color: #ff0000;}

/* Link focus del menù */
.main-navigation ul li.current-menu-item > a {
	color: #ff6600;
	font-weight: 400;
}

/* Mette il simbolo al sottomenù "...mentre scatta" */
.main-navigation ul li ul li:before {
	font-size: 1.2em;
	color: #ccc;
	content: '\0021b3';
	left: 0;
	position: absolute;
	top: 4px;
}
.main-navigation ul li ul li {
	border-left: 0;	
	padding-left: 21px;
}

[dreadnaut]

Succede perché la regola che assegna il blu

.main-navigation ul li.current-menu-ancestor > a {
    color: #0083cd;
}

ha una specificità più alta della regola del rosso

.home-menu:hover,
.main-navigation a:hover,  /* <--- questa probabilmente */
.widget ul li a:hover,
.widget_tag_cloud a:hover {
    color: #ff0000;
}

Vedi
https://developer.mozilla.org/en-US/...SS/Specificity
https://developer.mozilla.org/en-US/...nd_inheritance

[albenessereblog]

Succede perché la regola che assegna il blu

.main-navigation ul li.current-menu-ancestor > a {
    color: #0083cd;
}

ha una specificità più alta della regola del rosso

.home-menu:hover,
.main-navigation a:hover,  /* <--- questa probabilmente */
.widget ul li a:hover,
.widget_tag_cloud a:hover {
    color: #ff0000;
}

Vedi
https://developer.mozilla.org/en-US/...SS/Specificity
https://developer.mozilla.org/en-US/...nd_inheritance

Ho risolto mettendo !important

.home-menu:hover,
.main-navigation a:hover,
.widget ul li a:hover,
.widget_tag_cloud a:hover {
	color: #ff0000 !important;
}

[dreadnaut]

Per essere pignoli, hai aggirato il problema usando !important Il rischio è che forzando la mano in questo modo saltino fuori altri problemi.

A naso, potresti invece eliminare la regola dal blu, cambiando

.home-menu,
.main-navigation a,
.widget ul li a,
.main-navigation ul li.current-menu-ancestor > a {
	color: #0083cd;
}

in

.home-menu,
.main-navigation a,
.widget ul li a {
	color: #0083cd;
}

Vedi tu però se fa quello che ti serve.

[albenessereblog]

Per essere pignoli, hai aggirato il problema usando !important Il rischio è che forzando la mano in questo modo saltino fuori altri problemi.

A naso, potresti invece eliminare la regola dal blu, cambiando

.home-menu,
.main-navigation a,
.widget ul li a,
.main-navigation ul li.current-menu-ancestor > a {
	color: #0083cd;
}

in

.home-menu,
.main-navigation a,
.widget ul li a {
	color: #0083cd;
}

Vedi tu però se fa quello che ti serve.

Ho tolto !important e ho messo da così a così e funziona, ma con !important non mi dava problemi.

.home-menu:hover,
.main-navigation a:hover,
.widget ul li a:hover,
.widget_tag_cloud a:hover {
     color: #ff0000 !important;
}

.home-menu:hover,
.main-navigation a:hover,
.widget ul li a:hover,
.widget_tag_cloud a:hover,
.main-navigation ul li.current-menu-ancestor > a:hover {
	color: #ff0000;
}