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

Question

我的下拉菜单有问题，到处寻找，但无法找到适合我的答案。 问题是，当我将鼠标悬停在显示菜单上时，它甚至可以在点击任何元素之前消失。

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

这是CSS：

/*Menu*/

#menu {
  float: left;
}

ul {
  list-style:none;
  width: 150px;
  display:inline-block;
  border: 1px solid black;
}

#menu li {
  /*border: 1px solid black;*/
  margin-bottom: 0px;
}

#menu li a:hover {
  font-weight: bold;
}

.hidden  {
  margin-top: 0px;
}

/*Hide elements*/

#menu li ul li {
  display: none;
}

/*Reveal elements on hover*/

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

我尝试了很多东西，给出0的余量以避免差距＆＃34;在哪里它会重新显示：无，为更可原谅的悬停区域做一个更大的框...到目前为止没有结果，文本总是在我可以做任何事情之前消失。

感谢您的帮助。

Answer 1

打开检查工具。您可能必须使您悬停的区域更大。当您尝试从下拉菜单中进行选择时，您将“鼠标移开”显示下拉菜单的悬停区域。

Answer 2

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

/* 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;
}

https://jsfiddle.net/6wLevbt9/

Answer 3

http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_text

这可能会帮助你打击你的css中出现错误