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');
     });
});