CSS Dropdown Menu: Add delay on mouse out

I have dropdown using CSS and HTML below:

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

I want to add delay in this dropdown, so when the mouse is moved out, child menu still appear for seconds. I have try some tutorial out there, but it so confuse.

I dont want using any jquery dropdown menu for some reason. Can you help me how to make this happen using javascript.

SOLVED: http://jsbin.com/otapex/2

回答1:

Change all your :hover to a class (e.g. ".hover"). Add mouseover/mouseout events to add the "hover" class in a setTimeout. The setTimeout should check if the user is still hovering over the element.

回答2:

I think what you're looking for is hoverIntent

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

This accomplishes what you want to do. If you are new to javascript, it will take some playing around with, but it isn't not that hard.