javascript - Show/Hide cascading menu while hovering element -

i need show/hide cascading menu when user move mouse on element. quite easy achieve jquery, using hover function:
n.b: timer used hide menu after 200ms, , not important.

$(document).ready(function() {     var timer;     $('.element,.cascading_menu').hover(function(){         cleartimeout(timer);         $('.cascading_menu').show();     }, function(){         timer = settimeout(function(){$('.cascading_menu').hide();},200);     }); }); 

i have repeat code every menu want hide.
since have lot of menus, reduce code length.

my idea use array of "id of element hovering:id menu show/hide".
do think possible write jquery function that, given array of elements, provide show each menu, without having write code dozen of times?

you can use this can use same code elements, depends on html code formatting.

here example.

$(document).ready(function() {     $('.element').hover(function(){         $(this).find(".cascading_menu").stop().slidedown();     }, function(){         $(this).find(".cascading_menu").delay(200).slideup();     }); }); 

note: can use delay(ms) instead of timer.