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

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>

希望这会有所帮助