CSS下拉菜单：在鼠标移出时添加延迟答案

【问题标题】：CSS Dropdown Menu: Add delay on mouse outCSS下拉菜单：在鼠标移出时添加延迟
【发布时间】：2012-01-15 08:47:15
【问题描述】：

我在下面有使用 CSS 和 HTML 的下拉菜单：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Main Menu</title>
    <style>
    .menu
    {
        float:left;
        background:#CCC;
        margin:0px;
        padding:0px;
    }

    .menu  li
    {
        position:relative;
        float:left;
        width:180px;
        padding: 5px 0px;
        list-style: none;
    }

    .menu li:hover
    {
        background:#999;
    }

    .menu ul
    {       
        display:none;
        position:absolute;
        background:#CCC;
        padding:0;
        margin:5px 0 0 0;
    }

    .menu ul li ul
    {
        left:100%;
        top:0;
        margin:0px;
    }

    .menu li:hover ul ul, .menu li:hover ul ul ul
    {
        display: none;
    }

    .menu li:hover ul, .menu ul li:hover ul, .menu ul ul li:hover ul
    {
        display: block;
    }   
    </style>
</head>
<body>
    <ul class="menu">
        <li>Home</li>
        <li>
            Categories
            <ul>
                <li>Lorem Ipsum</li>
                <li>Dolor Sit Amet</li>
                <li>Consectetuer</li>
                <li>
                    Adipiscing
                    <ul>
                        <li>Child Elit Set Diam Nonummy</li>
                        <li>
                            Child Suspendisse sed
                            <ul>
                                <li>Grand Child Nulla dolor dui</li>
                                <li>Grand Child Venenatis feugiat</li>
                                <li>Grand Child Morbi ac lectus</li>
                                <li>Grand Child Nulla dolor dui</li>
                                <li>Grand Child Venenatis feugiat</li>
                                <li>Grand Child Morbi ac lectus</li>
                            </ul>
                        </li>
                        <li>Child Nulla dolor dui</li>
                        <li>Child Venenatis feugiat</li>
                        <li>Child Morbi ac lectus</li>
                    </ul>
                </li>
                <li>Elit Set Diam Nonummy</li>
                <li>Suspendisse sed</li>
                <li>
                    Nulla dolor dui
                    <ul>
                        <li>Child Elit Set Diam Nonummy</li>
                        <li>Child Suspendisse sed</li>
                        <li>Child Nulla dolor dui</li>
                        <li>Child Venenatis feugiat</li>
                        <li>Child Morbi ac lectus</li>
                    </ul>
                </li>
                <li>Venenatis feugiat</li>
                <li>Morbi ac lectus</li>
                <li>pharetra</li>
            </ul>
        </li>
        <li>Order</li>
        <li>Payment</li>
        <li>Contact</li>
    </ul>
</body>
</html>

JSBIN:
http://jsbin.com/anojif

我想在这个下拉菜单中添加延迟，所以当鼠标移出时，子菜单仍然会出现几秒钟。我已经尝试了一些教程，但它很混乱。

出于某种原因，我不想使用任何 jquery 下拉菜单。你能帮我如何使用javascript实现这一点。

已解决：http://jsbin.com/otapex/2

【问题讨论】：

这可以通过带有 transition-delay 属性的 CSS3 来完成（注意每个浏览器都有自己的名字，因为这是一个年轻的推荐）。你可以使用它。

标签： javascript css drop-down-menu

【解决方案1】：

我认为您正在寻找的是 hoverIntent

http://cherne.net/brian/resources/jquery.hoverIntent.html

这完成了你想做的事情。如果您是 javascript 新手，则需要一些时间来玩，但这并不难。

【讨论】：

【解决方案2】：

将所有 :hover 更改为一个类（例如“.hover”）。添加 mouseover/mouseout 事件以在 setTimeout 中添加“悬停”类。 setTimeout 应该检查用户是否仍在元素上悬停。

【讨论】：