onhover - ograniczenie wykonan

Witam

Mam liste elementow w kodzie html (ul li) i stworzyłem sobie taki efekt ze po najechaniu na element (onhover) rozwija mi sie pod lista w są zawarte takie pozycje:

element1
element2
podelement1
podelement2
element3

element3 troszkę przesuwa sie na dol a w miejscu jego wchodzą dwa pod elementy wszystko w jednej kolumnie jak opuszczam to pod elementy znikają i wszystko dzieje sie szybko wiec postanowiłem dodac efekt opóźnienia:

$( "ul li" ).hover(
  function() {
      $(this).children('ul').show(400);
  }, function() {
      $(this).children('ul').hide(400);
  }
);

tylko jest teraz taki problem ze często wędrując po tym menu najedziemy dwa lub trzy razy na dany element i cale menu zaczyna wariować bo najpierw się rozwija później zwija i tak 3x czy da sie zrobić jakieś ograniczenie?

ten sam problem jest z wieloma gotowymi widgetami np tym social po lewej stronie:

http://zapamietywator.gamestia.com/

może trudniej jest to zaobserwować w tym konkretnym przypadku ale jak szybko kursorem przejedziemy po nim kilka razy to efekt jeszcze przez jakiś czas działa i powtarza się mimo ze kursor jest w zupelnie innym miejscu jak tego uniknąć?

$( "ul li" ).hover(
  function() {
      $(this).children('ul').stop(true,true).show(400);
  }, function() {
      $(this).children('ul').stop(true,true).hide(400);
  }
);

rozwiązanie powyżej jest 100% trafne myślę, ale warto tutaj wspomnieć o funkcji **debounce ** z underscor'a: http://underscorejs.org/
Zapobiega m.in. zbyt częstemu odpalaniu obsługi zdarzeń