Почему при наведении на блок не появляется border?

Question

[bazliiii]

Добрый день , у меня появилась такая проблема:
Не работает такая связка в css

.sub__menu__list:hover .menu__link{
    border-bottom: 3px solid #4CBCBF;
}

Вот код меню:

<nav class="menu">
          <ul class="menu__list">
            <li class="menu__item">
              <a href="#" class="menu__link">Investors</a>
            </li>
            <li class="menu__item">
              <a href="#" class="menu__link">Entrepreneurs</a>
            </li>
            <li class="menu__item">
              <a href="#" class="menu__link">About us</a>
              <ul class="sub__menu__list">
                <li class="sub__menu__item"><a href="#" class="sub__menu__link">Who we are</a></li>
                <li class="sub__menu__item"><a href="#" class="sub__menu__link"> Jobs</a></li>
                <li class="sub__menu__item"><a href="#" class="sub__menu__link">FAQ</a></li>
              </ul>
            </li>
            <li class="menu__item">
              <a href="#" class="menu__link">Portfolio</a>
            </li>
            <li class="menu__item">
              <a href="#" class="menu__link">Research & Media</a>
            </li>
            <li class="menu__item">
              <a href="#" class="menu__link">Blog</a>
            </li>
          </ul>
        </nav>

css:

.sub__menu__list{
    top: 99px;
    left: 36.927vw;
    position: absolute;
    background-color: #fff;
    width: 261px;
    height: 207px;
    box-shadow: 0px 14px 11px rgba(0, 0, 0, 0.12);
    padding-top: 28px;
    display: none;
}
.sub__menu__link{
    font-style: normal;
    font-weight: 350;
    font-size: 18px;
    line-height: 50px;
    color: #094E60;
}
.sub__menu__item{
    list-style-type:disc;
    color: #094E60;
    font-size: 10px;
    margin-left: 60px;
}
.sub__menu__list:hover .menu__link{
    border-bottom: 3px solid #4CBCBF;
}
.menu__item:hover .sub__menu__list{
    display: block;
}

Кто разбирается помогите пожалуйста

Comments

[Сергей]

И зачем ты два раза пишешь класс?

Answer 1

[Олег Олегович]

Внутри .sub__menu__list нет .menu__link, а есть .sub__menu__link.

Comments

[bazliiii]

Мне нужно что бы при наведении на .sub__menu__list добавлялся border для .menu__link. Вы знаете как это правильно написать ?

Answer 2

[bazliiii]

Олег Олегович
Мне нужно что бы при наведении на .sub__menu__list добавлялся border для .menu__link. Вы знаете как это правильно написать ?

Comments

[Олег Олегович]

В css обращаться можно только к следующему элементу. Если .sub__menu__list переместить выше .menu__link. Тогда запись такая
.sub__menu__list:hover ~ .menu__link {что-то там}

Если не хотите перемещать тогда только средствами js.

[bazliiii]

Олег Олегович, спасибо за ответ! А вы случаем можете подсказать js ?