CSS problem with Chrome rendering strange things

user_18417341 0
Viewed 188

Good day! The problem appears with actual Chrome version I already have. This is the actual Chrome version I have 99.0.4844.51 Suddenly discovered that menus (we uses simple downloaded several years before with some style change) on our website go now wrong, for example that there is no font highlight (change colors) on menu hover Before it was:

nav ul li:hover { 
    color: white; /* color menu active font */
    background: #005DAB;
    }

Now it doesn't work and was implemented also additional:

nav ul li a:hover {
    color: white;
    }

To make it highlighted as before. I'm attaching complete JS fiddle with code

But together with it appeared other very strange story - disappearing of menu buttons after hover. Because probably it cannot show in other browsers I made Youtube video to show completely.

I'm sorry but I don't know where is the mistake and what to do. Your assistance is kindly appreciated!

web menuitem menu css html
1 Answers

I think issue is happening in menu items which has children. You can try this css if it works:

@media (min-width:761px){ 
    li.sub:hover a, li:hover a {
        color: white !important;
    }
    li.sub ul a:hover {
        color: #005DAB !important;
    }
    li a{
      color: grey !important;
    }
}
@media (max-width:760px){ 
    li.sub:hover ul a {
        color: white !important;
    }
    li:hover a {
        color: #005DAB !important;
    }
    li.sub ul a:hover {
        color: #005DAB !important;
    }
    li.sub a:hover {
    color: #005DAB !important;
    }
    li a {
      color: white !important;
    }
}
user_89364560
Related