How can i make the list appear on hover? - html

Question

So I have this code:
.hoverlist12:hover #details {
display: block;
}
The thing is the list doesn't appear at all. If I change the hoverlist12 class with the ul, it works fine, but it appears when I hover on all the elements, and I want it to appear when I hover it only on the first "li". Usually, I have no problem doing this but now I just can't figure it out.
.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">HOME</li> -->
<li class="homelk">
CE ESTE adadsadassssss
</li>
<li>INTREBARI FRECVENTE</li>
<li>PARTENERI</li>
<li>CONTACT</li>
<!-- <li><i class="fa fa-facebook-official"></i></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">
CE ESTE USCACIUNEA
</li>
<ul id="details">
<li>Manifestari</li>
<li>Femeia activa</li>
<li>Maternitatea</li>
<li>Menopauza</li>
<li>Sub tratament</li>
</ul>
<li> DE CE HAYLO GYN </li>
<li> INTREBARI </li>
<li>CONTACT</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><i class="fa fa-facebook-official"></i></li> -->
</ul>
</div>
</div>
</nav>

Answer 1

Use selector like this: .hoverlist12:hover ~ #details Because #details and .hoverlist12 elements are siblings or at same level. You can use this selector only .hoverlist12:hover #details when #details is a child element of .hoverlist12. So, please change your CSS code as I suggested OR Please change your structure like:
<li class="hoverlist12">
CE ESTE USCACIUNEA
<ul id="details">
<li>Manifestari</li>
<li>Femeia activa</li>
<li>Maternitatea</li>
<li>Menopauza</li>
<li>Sub tratament</li>
</ul>
</li>