Html CSS：当我试图从显示列表中单击元素时，下拉菜单消失

我的下拉菜单有问题，到处找，但找不到适合我的答案。 问题是，当我将鼠标悬停在显示菜单上时，它在我单击任何元素之前就消失了

<ul id="menu">

    <li><a href="#title">Home</a></li>
    <li><a href="#part_1">Commandes de base --->></a>
    <ul class="hidden">
        <li><a href="#ls">ls</a></li>
        <li><a href="#cd">cd</a></li>
        <li><a href="#mv">mv</a></li>
        <li><a href="#cp">cp</a></li>
        <li><a href="#mkdir">mkdir</a></li>
        <li><a href="#cat">cat</a></li>
        <li><a href="#find">find</a></li>
        <li><a href="#grep"></a></li>
    </ul>
    </li>

    <li><a href="#part_2">Commandes sytème --->></a>
    <ul class="hidden">
        <li><a href="#top">top</a></li>
        <li><a href="#chmod">chmod</a></li>
        <li><a href="#du">du</a></li>
        <li><a href="#reboot"></a></li>
    </ul>
    </li>

</ul>

我尝试了很多方法，给了一个0的边距，以避免出现一个“间隙”，它将返回显示：无，制作一个更大的框以获得一个更可原谅的悬停区域。。。到目前为止没有结果，文本总是在我做任何事情之前消失

---

谢谢您的帮助。

打开检查工具。你可能需要把你的悬停区域扩大一些。当您试图从下拉菜单中进行选择时，您正在“关闭”显示下拉菜单的悬停区域。

如果您小心地将鼠标移动到子菜单，这将允许您在子菜单上悬停

/* I added 'li' to the end of second rule and used !important 
   to combat the style being overridden */ 

#menu li a:hover + .hidden li, .hidden:hover li {
  display:block !important;
}

---

这可能有助于你打击css中的错误

是的，这是我试图解决的问题，inspect工具确实帮助我查看了该区域，但我仍在努力使该区域变大，经过几次调整后，它正在变得更好，但它摇摆不定，难以正确选择它确实有效！此外，我还学到了CSS的一个新特性：！重要的。非常感谢您的帮助，非常感谢！嗯，我回答了这个问题，但通常不会鼓励你走这条路。有更好的方法来实现你的目标。看一看就知道了。虽然知道这件事很好，

！重要信息

通常被用作解决CSS问题的最后尝试。祝你好运，@Etiennedh请在这里写一个答案，而不仅仅是一个链接

/* I added 'li' to the end of second rule and used !important 
   to combat the style being overridden */ 

#menu li a:hover + .hidden li, .hidden:hover li {
  display:block !important;
}