Selecting nested div in a li element

The user hovers the mouse over a menu item, i then want to show the submenu to the user. I want to use Jquery to show and hide the sub-nav-conatiner div. the only trouble is my jQuery show and hides ALL submenus - i want to display just one. So I need to select the currently hovered nested div, hope that makes sense. I have tried all sorts with no luck :(

     <ul> 

            <li><a href="/classifieds/farming"> 
             Agriculture & Farming</a> 
            </li> 

             <li class="sub-menu-header"><a href="#">Test Header </a> 
                  <div class="sub-nav-container"> 
                     <div class="sub-panel"> 
                         <ul> 
                            <li><a href="">Electrical Goods</a></li> 
                            <li><a href="">Electrical Goods</a></li> 
                         </ul> 
                       <div class="clr"></div>
                    </div> 
                  </div>
              </li> 

        ...
</ul>

jQuery

$(document).ready(function () {
             $('.sub-nav-container').css('display', 'none !important;');
         });
         $('.sub-menu-header').mouseover(function () {
             ?????????
         });
 开发者_开发技巧        $('.sub-menu-header').mouseleave(function () {
             $('.sub-nav-container').css('display', 'none !important;');
         });

---

Use this.

$('.sub-menu-header').mouseover(function () {
    $(this).find('div.sub-nav-container').show();
});

You can simplify the code, however - no need for separate mouseover and mouseleave handlers. Just use .hover() with a single function argument:

$('.sub-menu-header').hover(function () {
    $(this).find('div.sub-nav-container').toggle();
});

---

$('.sub-menu-header').mouseover(function () {
 $(this).children(".sub-nav-container").show();
});

---

$('.sub-menu-header').mouseover(function () {
    $('.sub-nav-container', this).show();
});