html - 我不知道使主题隐藏和可见的选择器

Question

HTML和CSS代码如下；

我正在使用 li ul 作为选择器来隐藏我的主题，但它不起作用 我不知道为什么。有人可以帮忙吗(我是编程新手)

<div id="subjects">
    <h3> SUBJECTS </h3>
    <ul class="subjects">
        <li><a href="#"> Introduction To Biochemistry</a> </li>
        <ul>
            <li><a> new</a> </li>
            <li><a> new</a> </li>
            <li><a> new </a></li> 
        </ul>

        <li><a href="#"> Chemistry Of Biomolecules </a></li>

        <ul>
            <li><a> new</a> </li>
            <li><a> new</a> </li>
            <li><a> new </a></li> 
        </ul>          
    </ul>
</div>

li ul {
    visibility: hidden;
    position: absolute;
    width: 150px;
}       

li:hover ul {
    visibility: visible;
}

Answer 1

我想这就是你想要的

编辑

您的 HTML 中也有错误。您的 HTML 应该如下所示。 (根据你的CSS修改你的HTML。但这并不意味着你必须这样写HTML)

<div id="subjects">
    <h3> SUBJECTS </h3>
    <ul class="subjects">
        <li><a href="#"> Introduction To Biochemistry</a>
            <ul>
                <li><a>new</a> </li>
                <li><a>new</a> </li>
                <li><a>new</a></li> 
            </ul>
        </li>
        <li><a href="#"> Chemistry Of Biomolecules </a>
            <ul>
                <li><a>new</a> </li>
                <li><a>new</a> </li>
                <li><a>new</a></li> 
            </ul>
        </li>
    </ul>
</div>

CSS

li ul{
    display:none;
    position:absolute;
    width:150px;
}

li:hover ul{
    display: block;
}