Изменить цвет при наведении на ли

Question

Я программирую простую страницу WordPress и хочу изменить цвет фона строки меню (вверху справа) при наведении на нее курсора. Это на сайте: https://www.happylogo.be/. Я обычно просто делаю это с помощью «добавить дополнительные CSS», который просто является файлом CSS. Странно то, что я считаю, что мой код селектора прав, потому что, когда я добавляю «видимость: скрытый»; Он быстро исчезает и снова появляется при наведении курсора на элементы li.

Код CSS, который я сейчас использую:

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

Но это не работает. Как изменить цвет фона при наведении на пункты меню?

Answer 1

Я заметил, что тег <a> внутри вашего <li> фактически перекрывает состояние наведения черным цветом.

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

Вы можете удалить этот стиль или также установить состояние наведения <a> на нужный цвет.

Answer 2

Это вызвано этой строкой CSS. В <li> на <a> есть наведение. Поскольку страница использует xhtml, стиль наведения должен быть на <a>, а не на <li>. Если вы используете HTML5, он может быть на <li>.

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