javascript - Keep submenu open on mouse out -

a navigation menu i'm working on has default css behavior (for rare people have javascript disabled). default, submenu not displayed:

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

on hover, submenu revealed:

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

for javascript-minded majority, menu juiced following jquery snippet:

jquery(document).ready(function($) {  /* cancel default css hover behavior */   $('.main-navigation ul li').on('mouseover',function(){         $('.main-navigation ul li:hover > ul').css('display', 'none');     $(this).css('cursor', 'pointer');      });  /* toggle submenu display (if submenu exists) */     $('.main-navigation ul li a').click(function() {      var li = $(this).closest('li');      if(li.has('ul')) li.find('ul').slidetoggle(100);  });  }); 

this toggling works great, except works long mouse cursor stays on parent link. if submenu open, , user happens move mouse away parent link, submenu snaps shut.

question: how keep submenu open on mouse out, if it's been open?

i tried adding jquery snippet:

$('.main-navigation ul li').on('mouseout',function(){     if ($('.main-navigation ul li ul').css('display') = 'none') {     $('.main-navigation ul li ul').css('display', 'none'); } else if ($('.main-navigation ul li ul').css('display') = 'block') {     $('.main-navigation ul li ul').css('display', 'block'); } }); 

not it's mediocre coding, doesn't work. ;-(

how should fix issue?

thank in advance suggestions!

i'm not sure click issue yet (looking @ it), don't need javascript "disable" css. use <noscript> tags, so:

<noscript>     <style type="text/css">         .exampleclass:hover { display: block; }     </style> </noscript> 

or add no-js class main menu element, remove class if js enabled @ start of javascript. write "no-js css" use .no-js + whatever children instead of main class.

update

the problem simple, when use mouseover cancel "non-js" css, menu still being hidden everytime user hovers on submenu. in other words, you're not removing "no js" css, you're hiding on every mouseover of .main-navigation ul li!

simply follow in first suggestion, remove mouseover function , viola! problem solved!

i wrote jsfiddle using code show how might approach it.

jsfiddle

code

$(function() {     //    see in css changed `.main-navigation ul li:hover > ul` `.main-navigation.no-js ul li:hover > ul`     //    see in html added class `no-js` `#site-navigation`     $(".no-js").removeclass("no-js");     $('.main-navigation ul li a').on("click", function(e) {         //    first hide sibling sub-menus!         $(this).closest('li').siblings().each(function(i) { $(this).find("ul").slideup("fast"); });         //    no need if statement had.          //    jquery "smart", if doesn't exist,          //        function won't anything!         $(this).closest('li').find('ul').slidetoggle(100);      })     //    , add little ya,      //        following slideup our submenu if user hovers away main menu     .closest("ul").on("mouseleave", function(e) {         $(this).find("ul:visible").slideup("slow");     }); }) 

step-by-step

1. where have manual script @ between <script type="text/javascript"> tags, before noscript tage threw in(which can remove), replace js following:

   <script type="text/javascript">     jquery(document).ready(function(jquery) {          jquery(".no-js").removeclass("no-js");         jquery('.main-navigation ul li a').on("click", function(e) {             $(this).closest('li').siblings().each(function(i) { $(this).find("ul").slideup("fast"); });             jquery(this).closest('li').find('ul').slidetoggle(100);          })         //  if find menu hiding fast, remove or comment out next 3 lines         jquery('.main-navigation ul').on("mouseleave", function(e) {             jquery(this).find("ul:visible").slideup("slow");         });      }); </script> 

2. remove noscript tags

3. in css code:

   /* find area written */ .main-navigation ul li:hover > ul {     display:block;   }  /* , replace following */ .main-navigation.no-js ul li:hover > ul {     display:block;   } 

4. finally, in html, find line written <nav id="site-navigation" class="main-navigation" role="navigation"> , replace with:

   <nav id="site-navigation" class="main-navigation no-js" role="navigation">