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>