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

.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>