element: hover не меняет отображение на блокировку

Question

К сожалению, мой раскрывающийся блок навигации не отображается при наведении курсора, надеюсь, кто-то может помочь. Я пытаюсь изменить display: none для display: block в классе .moreMenu.

html

css

Вот мой код ...

HTML

    <div class="navigationBar">
    <div class = "navigationBarTitles">
        <a href="home.html">HOME</a>
        <a href="verbs.html">VERBS</a>
        <a href="nouns.html">NOUNS</a>
        <a href="adverbs.html">ADVERBS</a>
        <a href="adjectives.html">ADJECTIVES</a>
        <a href="grammar.html">GRAMMAR</a>
        <a href="contact.html" class= "more">MORE
            <div class="moreMenu">
                <a href="grammar.html">TRIAL VIDEOS</a>
                <a href="about.html">ABOUT</a>
                <a href="contact.html">CONTACT</a>
                <a href="grammar.html">GCSE EXAM PREP</a>
                <a href="grammar.html">PLANS & PRICING</a>
                <a href="grammar.html">GRAMMAR</a>
            </div>
        </a>
    </div>

CSS

     .moreMenu {
        display: none;
        position: absolute;
        width: 140px;
        height: 180px;
        background-color: white;
        z-index: 2;
      }

    .more:hover .moreMenu {
        display: block;
    }

Answer 1

У вас ошибка HTML: вы не можете вкладывать интерактивные элементы. Поскольку div .moreMenu содержит элементы и сам содержится в элементе , он не будет работать.

Решение: не помещайте

внутри ссылки MORE, но поместите их рядом друг с другом в контейнер.

.more {
  display: inline;
}

.moreMenu {
  display: none;
  position: absolute;
  width: 140px;
  height: 180px;
  background-color: white;
  z-index: 2;
}

.more:hover .moreMenu {
  display: block;
}

<header>
  <div class="navigationBar">
    <div class="navigationBarTitles">
      <a href="home.html">HOME</a>
      <a href="verbs.html">VERBS</a>
      <a href="nouns.html">NOUNS</a>
      <a href="adverbs.html">ADVERBS</a>
      <a href="adjectives.html">ADJECTIVES</a>
      <a href="grammar.html">GRAMMAR</a>
      <div class="more"><a href="contact.html">MORE</a>
        <div class="moreMenu">
          <a href="grammar.html">TRIAL VIDEOS</a>
          <a href="about.html">ABOUT</a>
          <a href="contact.html">CONTACT</a>
          <a href="grammar.html">GCSE EXAM PREP</a>
          <a href="grammar.html">PLANS &amp; PRICING</a>
          <a href="grammar.html">GRAMMAR</a>
        </div>
      </div>
    </div>
  </div>
</header>