Question

不幸的是，它不会在悬停时显示我的下拉导航栏，希望有人可以提供帮助。我正在尝试将class.moreMenu上的display：none更改为display：none。

这是我的代码...

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出错：您不能嵌套交互式元素。由于.moreMenu div包含元素，并且本身包含在元素中，因此它将不起作用。

解决方案：不要将

放在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>

元素：悬停未将显示更改为阻止

1 个答案: