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

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

我想这就是你想要的

编辑

你也有错误在你的http。您的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

您在li标签中选择了所有ul标签，但您的HTML是相反的。

如果你改变你的CSS为ul li { css_here }它应该工作。

同样，当position: absolute;被设置为li项时，ul项不再包装这些项，因为它们从文档布局流中删除了。所以你可能想要删除position: absolute; .