The website I work on has a navigation menu (a CSS-formatted unordered list) with sub-menus for some of the categories (children unordered lists).

我工作的网站有一个导航菜单(一个CSS格式的无序列表),其中包含一些类别(子无序列表)的子菜单。

This CSS rule hides a submenu unordered list:

此CSS规则隐藏子菜单无序列表:

.main-navigation ul ul {
    display:none;
}

And this CSS rule makes submenu unordered list appear when a visitor hovers the cursor over the top level menu link:

当访问者将光标悬停在顶级菜单链接上时,此CSS规则会显示子菜单无序列表:

.main-navigation ul li:hover > ul {;
    display:block;
}

This is done for those (possibly non-existent) users who have JavaScript disabled in their browsers.

这适用于那些在浏览器中禁用JavaScript的用户(可能不存在)。

Now I'm spicing up that navigation menu with jQuery, and the very first thing that I need to do is disable the on hover behavior, dictated by CSS. For some reason I'm having hard time doing so, and could use some help. Here's what I tried:

现在我用jQuery加强了导航菜单,我需要做的第一件事就是禁用由CSS决定的悬停行为。出于某种原因,我很难这样做,并且可以使用一些帮助。这是我尝试过的:

jQuery(document).ready(function($) {
     $('.main-navigation ul li:hover > ul').css('display', 'none');

});

No luck, CSS still controls the behavior, and the submenu pops up on hover, as if there's no jQuery present. Which means, I'm not doing it correctly.

没有运气,CSS仍然控制行为,子菜单在悬停时弹出,好像没有jQuery存在。这意味着,我没有正确地做到这一点。

I'd appreciate it if someone explained to me how this should be done!

如果有人向我解释应该怎么做,我会很感激!

2 个解决方案

jQuery(document).ready(function($) {
     $('.main-navigation ul li').on('mouseover',function(){
        $('.main-navigation ul li:hover > ul').css('display', 'none');
     });
});