ARTICLE AD BOX
.useCase-menu:hover .menu-label .hoverMenu,
.resources-menu:hover .menu-label .hoverMenu,
.tools-menu:hover .menu-label .hoverMenu,
.solutions-menu:hover .menu-label .hoverMenu{
color: #33CCFF !important;
font-weight: 600;
}
.useCase-menu:hover .down-arrow-new img,
.resources-menu:hover .down-arrow-new img,
.solutions-menu:hover .down-arrow-new img,
.tools-menu:hover .down-arrow-new img {
filter: invert(58%) sepia(95%) saturate(500%) hue-rotate(160deg) !important;
transform: rotate(-180deg) translateX(0px) translateY(-3px);
}
I have a common header menu used across all pages of my website.
The HTML and CSS are exactly the same on every page.
However, on one specific page only, the menu text behaves incorrectly on hover.
Expected behavior
Normal state → white text
Hover state → blue text
Only one text visible at a time
Actual behavior (only on one page)
Normal state → white text
Hover state → blue text appears, but white text was previously overlapping
Other pages work perfectly with the same code
3
