jquery - 下拉菜单(带有图像和 UL LI 列表)

Question

我有一个下拉菜单(我固定了位置)和 display: none; 而不是我只是将显示更改为 block 。我有这个:

JavaScript

$('.dropdownmenu').hover(function () {
        console.log("hovered");
    },
    function () {
        console.log("out");
    }
);

HTML

<div class="dropdownmenu" style="display: none;">
    <div id="dropdownmenuheader">
        <ul class="dropdownmenulist">
            <li>
                <div class="dbordermenulist"><a href="/blah">Web design & development</a>
                </div>
            </li>
            <li>
                <div class="dbordermenulist"><a href="/blah">Web hosting</a>
                </div>
            </li>
            <li>
                <div class="dbordermenulist"><a href="/blah">Branding</a>
                </div>
            </li>
            <li>
                <div class="dbordermenulist"><a href="/blah">Digital Marketing</a>
                </div>
            </li>
            <li style="border-bottom: 0;">
                <div class="dbordermenulist" style="border-bottom: 0;"><a href="/blah">Software Development</a>
                </div>
            </li>
        </ul>
    </div>
    <div id="dropdowngradient"></div>
</div>

但是 mouseenter、mouseleave 或 hover 似乎不起作用，我正在尝试创建一种效果，当有人将鼠标悬停在它上面时它保持可见但当鼠标离开 2 秒时它会消失。 (我知道我需要使用计时器，但我无法触发 .hover)。

Answer 1

由于这可能无法回答您最初的问题，我问自己，为什么您不为这个用例使用 CSS？

这是一个例子:http://jsfiddle.net/NicoO/R9NNx/1/

更新了带有 CSS 转换和悬停延迟的示例:http://jsfiddle.net/NicoO/R9NNx/10/

ul.dropdownmenulist {
    list-style: none;
    margin:0;
    padding:0;
}
ul.dropdownmenulist > li {
    float: left;
    margin: 5px;
    position: relative;
}
ul.dropdownmenulist > li > ul {
    display: none;
    position: absolute;
    background-color: lightgray;
    box-shadow: rgba(0,0,0,0.3) 2px 2px 2px;
}

ul.dropdownmenulist > li:hover > ul {
    display: block;
}

使用这样的 HTML:

<ul class="dropdownmenulist">
    <li><a href="#">What we do</a>

        <ul>
            <li> <a href="/blah">Web design & development</a>

            </li>
            <li> <a href="/blah">Web hosting</a>

            </li>
            <li> <a href="/blah">Branding</a>

            </li>
            <li> <a href="/blah">Digital Marketing</a>

            </li>
            <li>
<a href="/blah">Software Development</a>

            </li>
        </ul>
    </li>

    <li><a href="#">What we do</a>

        <ul>
            <li> <a href="/blah">Web design & development</a>

            </li>
            <li> <a href="/blah">Web hosting</a>

            </li>
            <li> <a href="/blah">Branding</a>

            </li>
            <li> <a href="/blah">Digital Marketing</a>

            </li>
            <li>
<a href="/blah">Software Development</a>

            </li>
        </ul>
    </li>
</ul>