Jquery 当鼠标悬停在上时，子菜单不保留<；a>；标签

我试着让我的子菜单向下滑动，让它保持打开状态。我知道我可以将鼠标悬停在

标记上，但是当我将鼠标悬停在我的：：after元素上时，它也会打开，这是我不想要的

任何人都知道如何让子菜单（和子菜单…）保持不变

---

jshiddle:

这与嵌套有关-鼠标悬停事件在锚元素上，当鼠标离开锚元素边界时，onmouseout事件被触发，子菜单关闭

您需要将鼠标悬停在子菜单父元素li上-然后当子菜单向下滑动并将鼠标移到该子菜单上时，您仍将鼠标悬停在父元素上

希望这有点道理

编辑：我将JS更改为：

$(document).ready(function () {
    $(".level2, .level3, .level4").css('display', 'none');
    $(".media, .groepen").hover(

    function () {
        $('.back2').stop(true, false).slideDown('medium');
        $(this).closest('li').find('ul.level2').stop(true, false).slideDown('medium');
    },

    function () {
        $('.back2').stop(true, false).slideUp('medium');
        $(this).closest('li').find('ul.level2').stop(true, false).slideUp('medium');
    });
    $(".mediaSub").hover(

    function () {
        $(this).closest('li').find('ul.level3').stop(true, false).slideDown('medium');
    },

    function () {
        $(this).closest('li').find('ul.level3').stop(true, false).slideUp('medium');
    });
    $(".2014, .2015").hover(

    function () {
        $(this).closest('li').find('ul.level4').stop(true, false).slideDown('medium');
    },

    function () {
        $(this).closest('li').find('ul.level4').stop(true, false).slideUp('medium');
    });
});

---

这似乎在Chrome中起作用-您在哪个浏览器中看到分隔符触发菜单？

无关评论：*您的css怎么了？到处都是？我想你需要的是：@jbutler483意外复制的样式表也是标准化的样式表我不认为你真的需要所有的tbh-大多数只是添加了“额外的东西”，而这些东西很可能在生产中不会被使用/需要。@ketan如果你这样做，然后将鼠标悬停在“|”（以及前后的边距）上，它也会下降，但我不想这样，是的，我知道，但如果我这样做，我添加的：：after元素也会触发悬停，我不想这样什么浏览器？我将$（“.media>a，.groepen>a”）.hover（改为$（“.media，.groepen”）.hover（它似乎在顶层工作，没有分隔符触发菜单。我使用的是Chrome…也是Chrome，但显然我使用的是：：before，而不是：：after，因此如果在“media”之前将鼠标悬停在分隔符上，它会触发悬停。