我无法使悬停类工作.我怎样才能让它工作

Question

这是我的html代码，下面的是css代码。我真的需要帮助：(：hover类根本不起作用。我的代码有错吗？

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>

Answer 1

您的目标是锚点，而不是li

看来你应该把目标对准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>

Answer 2

* {
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>