Change color when hovering over li

Question

I'm programming a simple wordpress page and want to change the background color of the menu bar (on the top right) when hovering over it. It's on this website: https://www.happylogo.be/ . I normally just do this with 'add additional css' which just is a css file. The weird thing is that I beleive my selector code is right because when I add 'visibility:hidden;' It rapidly disappears and reappears again when hovering over the li items.

The css code I use now:

#menu-primary-coach li:hover{
   /*#menu-primary-coach is the id of the lu*/
   background-color: #c7143a !important;
}

But it doesn't work. How can I change the background color when hovering over the menu items?

Answer 1

It's caused by this line of CSS. There is a hover on the <a> within the <li> . Since the page is using xhtml the hover style should be on the <a> rather than the <li> . If you use HTML5 it can be on the <li> .

#primary-nav ul li:hover > a, #sticky_menu li:hover > a {
    background-color: #000000;
}

Answer 2

I noticed the <a> tag inside of your <li> is actually overriding the hover state with black.

#primary-nav ul li:hover > a, #sticky_menu li:hover > a {
    background-color: #000000;
}

You can remove this style or also set the hover state of the <a> to your desired color.