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

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

我认为这就是你想要的

修改

你的HTTML也有错误。您的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;
}

Answer 2

您在ul代码中选择了li个标记，但您的HTML却是另一种方式。

如果您将CSS更改为ul li { css_here }，它应该有效。

当position: absolute;项设置为li时，ul项目不再包装项目，因为它们将从文档布局流程中删除。因此，您可能希望删除position: absolute;。