Отмена поведения наведения CSS с помощью jQuery

Question

На веб-сайте, на котором я работаю, есть меню навигации (неупорядоченный список в формате CSS) с подменю для некоторых категорий (неупорядоченные списки детей).

Это правило CSS скрывает подменю неупорядоченный список:

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

И это правило CSS делает подменю неупорядоченный список появляется, когда посетитель наводит курсор на ссылку верхнем меню уровня:

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

Этот выполняется для тех (возможно, несуществующих) пользователей, у которых JavaScript отключен в своих браузерах.

Теперь я заправляю это меню навигации с помощью jQuery, и самое первое, что мне нужно сделать, это отключить поведение при наведении, продиктованное CSS. По какой-то причине мне нелегко это делать, и я могу воспользоваться некоторой помощью. Вот что я пробовал:

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

}); 

Не повезло, CSS по-прежнему управляет поведением и подменю появляется при наведении курсора мыши, как будто нет JQuery присутствует. Это значит, что я делаю это неправильно.

Буду признателен, если кто-нибудь объяснит мне, как это должно быть сделано!

Answer 1

Попробуйте это:

DEMO

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

Answer 2

Лучшее, что вы можете сделать, это удалить класс main-navigation от родителя. В противном случае вы не сможете манипулировать стилями псевдо классов из JavaScript.