CSS - Не работает выпадающий блок меню при наведении на ссылку

Question

Делаю выпадающий блок меню. Мне нужно, чтобы, наводя на слово-ссылку, выпадал блок. Если я в качестве селектора выбираю div с определённым классом, который окружает -ссылку, то это работает. Но мне нужно, чтобы доп.блок появлялся только при наведении на само слово. Пытаясь это сделать, я заменил div с классом на a с классом. Но выпадающий блок не появился. Ниже кусочек кода меню, в котором при наведении на About появлялся блок с классом .sub (который изначально скрыт (display:none).

Вот это работало:

.sub {
  display: none;
}

.button:hover .sub {
  position: absolute;
  display: block;
  cursor: pointer;
}

<div class="button"><a href="" class="about">About</a>
  <div class="sub">
    <div><a href="">History</a></div>
    <div><a href="">Kitchen</a></div>
    <div><a href="">Our Price</a></div>
  </div>
</div>

Это уже не работает:

.sub {
  display: none;
}

.about:hover .sub {
  position: absolute;
  display: block;
  cursor: pointer;
}

<div class="button">
  <a href="" class="about">About</a>
  <div class="sub">
    <div><a href="">History</a></div>
    <div><a href="">Kitchen</a></div>
    <div><a href="">Our Price</a></div>
  </div>
</div>

Изначально я не хотел вообще задавать класс ссылке, а чтобы выглядело так.

.button a:hover .sub

Вопрос: что я не понял про работу ссылок и почему второй вариант не работает?

Answer 1

потому что class="sub" не вложен в class="about". Они находятся рядом, для этого нужно указать так:

.sub {
  display: none;
}

.about:hover+.sub {
  position: absolute;
  display: block;
  cursor: pointer;
}

<div class="button">
  <a href="" class="about">About</a>
  <div class="sub">
    <div><a href="">History</a></div>
    <div><a href="">Kitchen</a></div>
    <div><a href="">Our Price</a></div>
  </div>
</div>

или так, если хотите .button a:hover .sub

.sub {
  display: none;
}

.button a:hover+.sub {
  position: absolute;
  display: block;
  cursor: pointer;
}

<div class="button">
  <a href="" class="about">About</a>
  <div class="sub">
    <div><a href="">History</a></div>
    <div><a href="">Kitchen</a></div>
    <div><a href="">Our Price</a></div>
  </div>
</div>

БЛОГ НА HUSL

CSS - Не работает выпадающий блок меню при наведении на ссылку

Ответы (1 шт):