Question

我创建了这个CSS下拉菜单。这个菜单应该完美无瑕，这是我唯一的问题我怎样才能让子菜单保持打开状态，当鼠标从它们中移除时不会立即消失？我的代码在这个链接上， http://fiddle.jshell.net/NJ4UP/

我尝试了几件事，但似乎没有什么东西可以做我想要的。我不想使用J-Query或JavaScript，因为我不熟悉它们，但是我们将非常感谢任何帮助!!

如果鼠标没有悬停在子菜单上，我想要和需要的只是子菜单不会立即消失。我正在考虑一个超时选项或者在预定的时间（即5秒）或其他菜单或链接被点击后将其设置为关闭的东西。

先谢谢了。

Answer 1

在CSS 中，当使用伪元素悬停时，您可以展开涵盖<li>的区域： DEMO 。

li:hover:before  {
  content:'';
  position:absolute;
  width:100px;
  height:200px;
  background:rgba(0,0,0,0.01);/* not 100% transparent, so it gets the mouse over */
}

在CSS 中，您可以延迟转换以关闭菜单 DEMO 。

不要使用显示来隐藏/显示子菜单
使用处理数字值的规则。

#menu ul > li ul {
  position:absolute;
  margin-left:-9999px;
  transition:0s 0.5s;/* stay open 0.5sec before to hide again */
}
    #menu ul > li:hover > ul {
  margin:0;
    transition:0s 0s;/* show ! don't wait */
}

Answer 2

你可以看一下，也许有帮助：

http://www.w3schools.com/css/css3_transitions.asp

Answer 3

在CSS中，您可以使用实验规则pointer-events和HTML tabindex属性。

pointer-events控制鼠标事件悬停在<a>第一级的<li>。

tabindex

<li>

这个想法是：

要点击点击事件，<li tabindex="0">可以点:focus并申请与:hover相同的规则。
然后<li>重点关注，以恢复接收鼠标事件的能力。

<强> DEMO - CSS click open/close menu

它也可以通过键标签打开关闭菜单

目前我认为最好设置一个类而不是tabindex并使用javasript在点击时切换类，或者至少保持：hover规则有效。

也可以某种方式为two level menu做

CSS子菜单在点击时保持打开状态。

3 个答案: