html - 如何使列表出现在悬停时？

Question

所以我有这个代码:

.hoverlist12:hover #details {
  display: block;
}

问题是列表根本没有出现。如果我用 ul 更改 hoverlist12 类，它工作正常，但是当我将鼠标悬停在所有元素上时它会出现，并且我希望它只在我将它悬停在第一个“li”上时出现。通常，我这样做没有问题，但现在我就是想不通。

.navbar {
  border-radius: 0;
  max-height: 50px;
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-brand {
  color: #ffffff;
}
.navbar-default .navbar-brand:hover {
  color: #ffffff;
  transform: scale(1.1);
}
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:hover {
  color: #ffffff;
}
.navbar-default .navbar-nav > li:focus,
.navbar-default .navbar-nav > li:hover {
  background-color: rgba(0, 0, 0, 0.15);
}
nav {
  font-family: "ITCErasStd-Medium";
}
.hiddeOnTop {
  visibility: hidden;
}
.container-fluid {
  padding-right: 3%;
  padding-left: 3%;
  display: inline-block;
  width: 100%;
}
.navbar-default,
.container-fluid {
  background-color: #be3c7a;
}
.nav > li > a {
  font-size: 1.1em;
}

.navbar .facebook {
  padding: 0;
  margin-top: 7px;
}
.navbar .facebook:hover {
  background: none;
  transform: scale(1.1);
}
.navbar-brand,
.nav > li.active > a {
  font-family: "ITCErasStd-Bold";
}

#details {
  padding: 26px 30px;
  display: none;
  color: white;
  z-index: 900;
  font-size: 2rem;
  list-style-type: none;
  position: absolute;
  margin-top: 50px;
  background-color: #be3c7a;
}
.hoverlist12:hover #details {
  display: block;
}

 <nav class="mobile_nav">
      <button type="button">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <ul class="nav-content">
        <li>
          <a href="htps://www.facebook.com" alt="facebook" class="facebook"
            ><img
              src="./img/fb-icon.svg"
              alt="fb-icon"
              onerror="this.src='./img/fb-icon.png'"
          /></a>
        </li>
        <!-- <li class="homelk"><a href="#home">HOME</a></li>               -->
        <li class="homelk">
          <a href="./uscaciunea-vaginala.html">CE ESTE adadsadassssss </a>
        </li>
        <li><a href="#">INTREBARI FRECVENTE</a></li>
        <li><a href="#">PARTENERI</a></li>
        <li><a href="#">CONTACT</a></li>
        <!-- <li><a href="htps://www.facebook.com"><i class="fa fa-facebook-official"></i></a></li>  -->
      </ul>
    </nav>
    <!-- //////////////////////////// NAVBAR  \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\-->
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button
            type="button"
            class="navbar-toggle"
            data-toggle="collapse"
            data-target="#myNavbar"
          >
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand navigate" href="#home"><span>HOssME</span></a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-right dropdown">
            <li class="hoverlist12">
              <a href="./uscaciunea-vaginala.html">CE ESTE USCACIUNEA</a>
            </li>
              <ul id="details">
                <li>Manifestari</li>
                <li>Femeia activa</li>
                <li>Maternitatea</li>
                <li>Menopauza</li>
                <li>Sub tratament</li>
              </ul>
            <li><a href="#"> DE CE HAYLO GYN </a></li>
            <li><a href="#"> INTREBARI </a></li>
            <li><a href="#">CONTACT</a></li>
            <li>
              <a href="htps://www.facebook.com" alt="facebook" class="facebook"
                ><img
                  src="./img/fb-icon.svg"
                  alt="fb-icon"
                  s
                  onerror="this.src='./img/fb-icon.png'"
              /></a>
            </li>
            <!-- <li><a href="htps://www.facebook.com"><i class="fa fa-facebook-official"></i></a></li>  -->
          </ul>
        </div>
      </div>
    </nav>

Answer 1

像这样使用选择器:.hoverlist12:hover ~ #details 因为#details 和.hoverlist12 元素是同级元素或处于同一级别。当 #details 是 .hoverlist12 的子元素时，您只能使用此选择器 .hoverlist12:hover #details。所以，请按照我的建议更改您的 CSS 代码，或者请更改您的结构，例如:

<li class="hoverlist12">
      <a href="./uscaciunea-vaginala.html">CE ESTE USCACIUNEA</a>
      <ul id="details">
         <li>Manifestari</li>
         <li>Femeia activa</li>
         <li>Maternitatea</li>
         <li>Menopauza</li>
         <li>Sub tratament</li>
      </ul>
   </li>