Добрый день!
Вот такая структура:
<li class="site-list__item hover-dropdown">
<a class="site-list__link" href="#"><span class="link-underline">Каталог</span></a>
<ul class="site-list__sub-menu sub-menu dropdown">
<li class="sub-menu__item sub-menu__item--title">
<a class="sub-menu__link sub-menu__link--title">Новинки</a>
</li>
</ul>
</li>
Мне нужно, при выпадение блока с подменю, находясь в этом блоке, убрать border-bottom с кнопки, само свойство повесил на класс
link-underline.
Что я делаю:
.site-list__item:hover > .link-underline,
.site-list__item:focus > .link-underline {
border-bottom: none;
}
Это не работает.
Но при этом, обращаясь к элементу уровнем выше (сама ссылка), я могу с ней воздействовать таким способом:
.site-list__item:hover > .site-list__link,
.site-list__item:focus > .site-list__link {
color: #323232;
background-color: #f8f7f4;
}
Получается, я не могу добраться до вложенного спана в ссылку.
Так же, я пробовал положить ссылку ниже списка, и сделать вот так:
.site-list__sub-menu:hover ~ .link-underline,
.site-list__sub-menu:focus ~ .link-underline {
border-bottom: none;
}
И это, конечно же, тоже не сработало.
Делать огромную вложенность не пробовал.
На JS могу, но хочу на CSS.
Что я делаю не так?