CSS下拉菜单:在鼠标输出时添加延迟

Question

CSS下拉菜单:在鼠标输出时添加延迟

Zul*_*rul 8 javascript css drop-down-menu

我在下面使用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>

Run Code Online (Sandbox Code Playgroud)

JSBIN:http://jsbin.com/anojif

我想在此下拉列表中添加延迟,因此当鼠标移出时,子菜单仍会显示几秒钟.我已经尝试了一些教程,但它很混乱.

出于某种原因,我不想使用任何jquery下拉菜单.你能帮我解决一下如何使用javascript实现这一目标.

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

Answer 1

aep*_*eus 6

更改所有:悬停到类(例如".hover").添加mouseover/mouseout事件以在setTimeout中添加"hover"类.setTimeout应检查用户是否仍悬停在元素上.

归档时间：	14 年，1 月前
查看次数：	10031 次
最近记录：	13 年，6 月前