i have menu on list, this is html:

```
 <div class="main_menu">
   <ul>
      <li>
        <a href="#" target="_self"><span>Content</span></a>
        <div id="submenu_01" class="sub_menu_main"></div>
      </li>
      <li>
        <a href="#" target="_self"><span>Content</span></a>
        <div id="submenu_02" class="sub_menu_main"></div>
      </li>
   </ul>
 </div>

```

Now - on hover for list element i need to show `sub_menu_main` div which is deppend for each li and have diferent content. Additionally i want to have some timeout on mouseleve action so that changing the div element of the list for a while remained outdoor, and another has not yet appeared.

This is my function:

```
$('.main_menu ul li').mouseenter(function(){
    $('.sub_menu_main').css('display','block');
});
$('.main_menu ul').find('li').each().mouseleave(function(){
    setTimeout(function(){
        $('.sub_menu_main').css('display','none');
    },2000);
});

```

thx for help.