Выпадающее меню CSS: добавить задержку на мыши

У меня есть выпадающее меню с использованием 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

8
css drop-down-menu javascript

2 ответов

измените все: наведите курсор на класс (например,".парить.)" Добавьте события mouseover / mouseout, чтобы добавить класс "hover" в setTimeout. SetTimeout должен проверить, по-прежнему ли пользователь парит над элементом.

6

Я думаю, что вы ищете hoverIntent

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

Это решает, что вы хотите сделать. Если вы новичок в javascript, это займет некоторое время, но это не так сложно.

1