javascript - navigation dropdown not working with timeOuts -

so jquery , settimeout eluding me! , appeal kind nature of stack community help.

i creating bespoke drop-down navigation , having few issues implementing settimeout script menu has time-out in response.

i shall go more detail regarding time-outs.

the menu needs have time-out on mouseenter user can accidentally hover on link , not trigger drop-down; set 400ms. want time-out allows user mouseleave drop down , have 1000ms hover drop down before drop down hides.

the caveat of putting time-outs in stop drop-down seamlessly switching between drop-downs no flickering.

if 1 drop-down visible , user mouses top level link (parent, i.e. "services") visual of drop-down (its container) shows , data within drop-down changes.

i hope covers requirements of script, if not please ask me elaborate.

jsfiddle link: http://jsfiddle.net/atqqv/8/

and purists or peeps cannot visit jsfiddle site here js code.

function responsive_navigation() {     var hover, $this;      $target = $("header nav > ul > li");      $target.on('mouseenter click', function (e) {         $this = $(this);          if(hover) {             cleartimeout(hover); // cancel timeout hide menu             hover = null;         }          hover = settimeout(nav_show, 400);      }).on('mouseleave', function () {         //cleartimeout(hover);         //hover = settimeout(nav_hide, 1000);         nav_hide();     });      // show menu relative user actions     function nav_show() {         $this.addclass('active');         $this.children('.dropnav').show();     }     // hide menu relative user actions     function nav_hide() {         $this.children('.dropnav').hide();         $this.removeclass('active');     } }  $(document).ready(function () {     responsive_navigation(); }); 

thank in advance , , contribute answer.

http://jsfiddle.net/da4cv/8/

function responsive_navigation() {  var menuitems = $('header nav > ul > li'); var dropdowns = $('.dropnav'); var showtimer = null; var hidetimer = null;  // hover on nav li menuitems.on('mouseover click', function(){       cleartimeout(showtimer);                cleartimeout(hidetimer);      var mi = $(this);     showtimer = settimeout(function(){nav_show(mi);}, 400);     menuitems.removeclass('active'); });  // end hover on nav li menuitems.on('mouseleave', function(){      cleartimeout(hidetimer);      var mi = $(this);     hidetimer = settimeout(function(){nav_hide(mi);}, 1000); });  // hover on dropdown dropdowns.on('mouseover', function(){     cleartimeout(hidetimer); });  // end hover on dropdown dropdowns.on('mouseleave', function(){     var dd = $(this);     hidetimer = settimeout(function(){nav_hide(dd.parent());}, 1000);     });   // show menu relative user actions function nav_show(menuitem) {     dropdowns.hide();     $(menuitem).children('.dropnav').show();     $(menuitem).addclass('active'); }  // hide menu relative user actions function nav_hide(menuitem) {     menuitem.children('.dropnav').hide();     menuitem.removeclass('active'); }    }  $(document).ready(function () {     responsive_navigation(); });