html - 为什么我尝试使用下拉菜单时它会关闭

Question

我正在尝试模仿这个网站(但使用我自己的图像):https://www.w3schools.com/w3css/tryw3css_templates_band.htm#

每次我点击更多试图进入“商品”、“附加”或“媒体”时，它都会关闭(除非我做得很快)。我该如何解决这个问题？

我知道用 HTML/CSS 制作下拉菜单可能有更好的方法，但这是我知道的唯一方法。

nav {
  background-color: black;
  height: 3rem;
  widows: 100%;
}

.navbar {
  height: 100%;
  display: flex;
  flex-flow: row wrap;
  border: 1px solid hotpink;
  justify-content: flex-start;
  align-items: center;
}

.navbar li {
  border: 2px solid green;
  list-style-type: none;
  height: 100%;
}

.navbar li a {
  border: 1px solid orange;
  color: white;
  text-decoration: none;
  padding: 0 20px;
  text-transform: uppercase;
  display: block;
  height: 100%;
  line-height: 2rem;
}

.navbar li a:hover {
  background-color: #CCCCCC;
  color: black;
  display: block;
  height: 100%;
}

section#header-image {
  background-image: url('images/sky.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 60vh;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  align-items: center;
  color: white;
}

.moreArrow{
    height: 6px;
    width: 8px;
margin-left: 5px;
}


ul li ul li {
  display: none;
}

ul li:hover ul li {
  display: block;
}

ul li:hover ul li a {
  color: white;
  background-color: black;
  text-decoration: none;
  padding: 0 20px;
  height: 100%;
}

<header>
  <nav>
    <ul class="navbar">
      <li><a href="#">home</a></li>
      <li><a href="#">band</a></li>
      <li><a href="#">tour</a></li>
      <li><a href="#">contact</a></li>
      <li><a href="#">more<img src="images/arrow.png" alt="x" class="moreArrow"></a>

        <ul>
          <li><a href="#">Merchandise</a></li>
          <li><a href="#">Extras</a></li>
          <li><a href="#">Media</a></li>
        </ul>
      </li>
    </ul>
  </nav> <!--end of nav-->

  <section id="header-image">

    <div class="header-text">
      <h2>London</h2>
      <p>We killing it up in 'ere </p>
    </div>

  </section>

</header>

Answer 1

因此，我对您的 HTML 做了一点改动，为了保持“:hover”状态，您需要将它必须保持可见的任何东西放在悬停的元素中，在这种情况下，一个“span”标签(我确实从 'a' 标签更改了，因为你不能嵌套 'a' 标签)

从这一点来看，CSS 非常简单，您隐藏子菜单并在悬停时显示，它在 span 标签内的任何内容也属于 ':hover' 状态

body {
      margin: 0px;
    }
    nav {
      width: 100vw;
      height: auto;
      border: 1px solid red;
    }
    nav ul.navbar {
      display: flex;
      margin: 0;
      padding: 0;
    }
    nav ul.navbar > li {
      width: auto;
      display: inline-block;
      vertical-align: top;
    }
    nav ul.navbar > li a {
      display: inline-block;
      text-decoration: none;
      color: black;
      border: 1px solid red;
      padding: 10px 30px;
      box-sizing: border-box;
      width: auto;
    }
    nav ul.navbar > li span {
      display: inline-block;
      text-decoration: none;
      color: black;
      border: 1px solid red;
      position: relative;
      padding: 10px 30px;
    }
    nav ul.navbar > li span:hover ul {
      display: inline-block;
    }
    nav ul.navbar > li span ul {
      display: none;
      margin: 0;
      padding: 0;
      position: absolute;
      top: 38px;
      left: 0px;
      width: auto;
      border: 1px solid blue;
    }
    nav ul.navbar > li span ul li {
      display: inline-block;
      list-style: none;
      width: 100%;
    }
    nav ul.navbar > li span ul li a {
      width: 100%;
      display: inline-block;
    }

    <header>
      <nav>
        <ul class="navbar">
          <li><a href="#">home</a></li>
          <li><a href="#">band</a></li>
          <li><a href="#">tour</a></li>
          <li><a href="#">contact</a></li>
          <li>
          <span class="more">more
            <ul rel=":D">
              <li><a href="#">Merchandise</a></li>
              <li><a href="#">Extras</a></li>
              <li><a href="#">Media</a></li>
            </ul>
          </span>
          </li>
        </ul>
      </nav> <!--end of nav-->
    </header>

希望对你有帮助