html - 下拉菜单 CSS 未显示 li :hover/a:hover -- No JavaScript

Question

所以，我什至不担心这些元素的位置或样式。我只是想在将鼠标悬停在主要 li 元素上时显示 。我将在下面发布我的代码，但首先要说的是:我已经尝试了很多方法来使其正常工作，而我尝试过的唯一方法就是:

.navbar:hover ul

问题是当我将鼠标悬停在整个导航栏元素上时，我不希望显示“事件”和“食物”元素。我希望当我将鼠标悬停在每个单独的主要“li”元素上时它们会发生。我还只想显示我悬停的元素正下方的元素(并非同时显示所有“事件”和“食物”元素)

以下是不起作用的事情:

.navbar li:hover ul
.navbar a:hover ul
.navbar > a:hover > ul

我尝试了比这更多的组合，要么导致我将鼠标悬停在 li 元素上，然后所有隐藏元素立即显示，要么根本不显示。 我确实需要一些帮助才能使其正常工作(我也查看了各个网站以获取解释，但无法弄清楚，这就是我在这里的原因)。任何帮助将不胜感激，谢谢!

nav ul {
  position: sticky;
  top: 0%;
}


/*NAVBAR*/

ul.navbar {
  border-bottom: 2px solid black;
  background-color: #b52500;
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  /*for mobile*/
  justify-content: center;
  box-shadow: 0px 4px 6px -6px black;
  position: sticky;
  top: 0%;
  margin-bottom: 4%;
}

.navbar a {
  display: block;
  padding: 6px 10px;
  text-decoration: none;
  background-color: #b52500;
  color: white;
  font-weight: normal;
}

.navbar a:hover {
  text-decoration: underline;
}

.navbar .active {
  background-color: white;
  color: black;
  border: .5px solid black;
  border-top: none;
}

.navbar .active:hover {
  text-decoration: none;
}

.navbar>ul {
  display: none;
}

.navbar a:hover>ul {
  display: block;
  list-style-type: none;
}

<nav>

  <ul class="navbar">

    <li> <a class="active" href="index.html"> Home </a></li>

    <ul>
      <li> Activities </li>
      <li> Food </li>
    </ul>

    <li> <a href="cent.html"> Centro Hist&oacute;rico </a></li>

    <ul>
      <li> Activities </li>
      <li> Food </li>
    </ul>

    <li> <a href="chap.html"> Chapultepec </a></li>

    <li> <a href="colo.html"> Colonia Doctores </a></li>

    <li> <a href="coyo.html"> Coyoc&aacute;n </a></li>

    <li> <a href="pola.html"> Polanco </a></li>

    <li> <a href="zona.html"> Zona Rosa </a></li>

  </ul>

</nav>

Answer 1

选择 li 元素并使用 + 相邻同级选择器:

nav ul {
  position: sticky;
  top: 0%;
}


/*NAVBAR*/

ul.navbar {
  border-bottom: 2px solid black;
  background-color: #b52500;
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  /*for mobile*/
  justify-content: center;
  box-shadow: 0px 4px 6px -6px black;
  position: sticky;
  top: 0%;
  margin-bottom: 4%;
}

.navbar a {
  display: block;
  padding: 6px 10px;
  text-decoration: none;
  background-color: #b52500;
  color: white;
  font-weight: normal;
}

.navbar a:hover {
  text-decoration: underline;
}

.navbar .active {
  background-color: white;
  color: black;
  border: .5px solid black;
  border-top: none;
}

.navbar .active:hover {
  text-decoration: none;
}

.navbar>ul {
  display: none;
}

.navbar li:hover + ul {
  display: block;
  list-style-type: none;
}

<nav>
  <ul class="navbar">
    <li> <a class="active" href="index.html"> Home </a></li>
    <ul>
      <li> Activities </li>
      <li> Food </li>
    </ul>
    <li> <a href="cent.html"> Centro Hist&oacute;rico </a></li>
    <ul>
      <li> Activities </li>
      <li> Food </li>
    </ul>
    <li> <a href="chap.html"> Chapultepec </a></li>
    <li> <a href="colo.html"> Colonia Doctores </a></li>
    <li> <a href="coyo.html"> Coyoc&aacute;n </a></li>
    <li> <a href="pola.html"> Polanco </a></li>
    <li> <a href="zona.html"> Zona Rosa </a></li>
  </ul>
</nav>