Issue
This is my html code, and the lower one is css code. I really need help 🙁
:hover class does not work at all. Did I code something wrong?
html {
box-sizing: border-box;
}
a {
text-decoration: none;
color: black;
}
.nav_bar>li {
padding: 20px;
flex-basis: 0;
flex-grow: 1;
background-color: #ffffa8;
height: 1rem;
text-align: center;
flex-direction: column;
}
#Homesub {
display: none;
}
#Home:hover #Homesub {
display: list-item;
}<nav>
<ul class="nav_bar">
<li>
<a href="Hme.html" id="Home">Home</a>
<ul class="sub">
<li><a href="Members.html" id="Homesub">Members</a></li>
</ul>
</li>
</ul>
</nav>Solution
You are targeting the anchor, not the li
Seems like you should be targeting the ul.
html {
box-sizing: border-box;
}
a {
text-decoration: none;
color: black;
}
.nav_bar>li {
padding: 20px;
flex-basis: 0;
flex-grow: 1;
background-color: #ffffa8;
height: 1rem;
text-align: center;
flex-direction: column;
}
li > ul {
display: none;
}
li:hover > ul {
display: block;
}<nav>
<ul class="nav_bar">
<li>
<a href="Hme.html" id="Home">Home</a>
<ul class="sub">
<li><a href="Members.html" id="Homesub">Members</a></li>
</ul>
</li>
</ul>
</nav>Answered By – epascarello
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0