Как убрать подчеркивание при наведении мышкой?

Question

[Tim Nev]

#td-header-menu .menu-item:nth-child(1) a{
text-decoration: none;}

Код выше - не помогает! Соответственно: как убрать подчеркивание при наведении мышкой в меню у первой менюшки - домик (Домой) на сайте https://ari.org.ru.

упдате: решение было найдено благодаря Александр Шемаханов

Возник новый вопрос: При наведении мышкой на менюшку Home подчеркивание исчезает, но кнопка Home осталась подчеркнутой сама по себе на главной странице. Как убрать подчеркивание с главной?

Answer 1

[Александр Шемаханов]

Дело не в text-decoration, а в псевдо-элементе :after у пунктов меню, которое и отвечает за подчеркивание.
Добавь для класса кнопки главной вот это правило и все сработает:

.sf-menu>.menu-item-home>a:after {
    background-color: transparent;
}
.sf-menu>.menu-item-home>a:hover::after {
    background-color: transparent;
}

Comments

[Tim Nev]

Спасибо, работает - при наведении мышкой подчеркивание исчезает, но кнопка home осталась подчеркнутой сама по себе, когда заходишь на главную. Как убрать подчеркивание с главной?

[Александр Шемаханов]

Tim Nev, все дело в приоритете применения стилей, кто последний тот и применяется. Вы добавили стиль для .sf-menu>.menu-item-home>a:after в файл стилей dba61ef424de8585aec1d914abd53db3.css, при этом у вас в коде страницы в head'е в тэге style прописан стиль для .sf-menu > .current-menu-item > a:after, т.к. главная кнопка главной и есть тот самый current то и стили перебиваются и цвет вместо прозрачного становится #990134


Либо добавлять прозрачный цвет туда же в шапку, либо добавьте !important

.sf-menu>.menu-item-home>a:after {
    background-color: transparent !important;
}
.sf-menu>.menu-item-home>a:hover::after {
    background-color: transparent !important;
}

[Tim Nev]

Muchas gracias maestro!

Answer 2

[Алексей Скляров]

#td-header-menu .menu-item:nth-child(1) a:hover{
text-decoration: none;}

Comments

[Tim Nev]

Забыл написать - этот код тоже не помогает.