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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
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>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
* {
list-style: none;
text-decoration: none;
padding: 0;
margin: 0;
}
nav {
width: auto;
display: flex;
justify-content: center;
}
nav > ul > li {
background-color: #ddd;
padding: 10px 20px;
text-transform: uppercase;
position: relative;
}
nav > ul > li > a ul {
display: none;
position: absolute;
left: 0;
top: 100%;
background-color: rgb(243 243 243);
width: 100%;
text-align: center;
padding: 10px;
}
nav > ul > li:hover > a ul {
display: initial;
}
<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>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>