Cancel CSS hover behavior with jQuery -


the website work on has navigation menu (a css-formatted unordered list) sub-menus of categories (children unordered lists).

this css rule hides submenu unordered list:

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

and css rule makes submenu unordered list appear when visitor hovers cursor on top level menu link:

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

this done (possibly non-existent) users have javascript disabled in browsers.

now i'm spicing navigation menu jquery, , first thing need disable on hover behavior, dictated css. reason i'm having hard time doing so, , use help. here's tried:

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

no luck, css still controls behavior, , submenu pops on hover, if there's no jquery present. means, i'm not doing correctly.

i'd appreciate if explained me how should done!

try this:

demo

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

Comments

Popular posts from this blog

blackberry 10 - how to add multiple markers on the google map just by url? -

php - guestbook returning database data to flash -

delphi - Dynamic file type icon -