Как сделать так, чтобы список появлялся при наведении курсора?

Question

Итак, у меня есть этот код:

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

Дело в том, что список вообще не появляется. Если я изменяю класс hoverlist12 с помощью ul, он работает нормально, но он появляется, когда я нахожу курсор мыши на всех элементах, и я хочу, чтобы он появлялся, когда я наводил курсор только на первый «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 являются родственными или одинаковыми.Вы можете использовать этот селектор только .hoverlist12:hover #details, когда #details является дочерним элементом .hoverlist12.Поэтому, пожалуйста, измените свой 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>