Question

I am trying to get each div to show individually on my list as the user mouseovers and mouseouts, I want to be able to hover onto the displayed div also and then slideUp on exit..

here is my http://jsfiddle.net/AZhgk/

<div id="left_aside">

    <ul id="menu_seo" class="menu">
        <li id="menu-seo"><span class="arrowout1"></span>SEO</li>
        <div class="menu-seo-desc"></div>
        <li id="menu-siteaudits"><span class="arrowout2"></span><a href="#">Site Audits</a></li>
        <div class="menu-seo-desc"></div>
        <li id="menu-linkbuilding"><span class="arrowout3"></span><a href="#">Link-Building</a></li>
        <div class="menu-seo-desc"></div>
        <li id="menu-localseo"><span class="arrowout4"></span><a href="#">Local SEO</a></li>
        <div class="menu-seo-desc"></div>
    </ul>
    <script>
    $(document).ready(function(){
    var menu_seo = $("menu_seo");

        menu_seo.mouseover(function(){
             $(".menu-seo-desc").slideDown(300);
        });
    menu_seo.mouseout(function(){
             $(".menu-seo-desc").slideUp(300).end();
        });
 });
    </script>
</div>

any suggestions would be appreciated!

Answer 1

try like this :

<div id="left_aside">

    <ul id="menu_seo" class="menu">
        <li id="menu-seo" class="menu-seo"><span class="arrowout1"></span>SEO
        <div class="menu-seo-desc"></div>
            </li>
        <li id="menu-siteaudits" class="menu-seo"><span class="arrowout2"></span><a href="#">Site Audits</a>
        <div class="menu-seo-desc"></div>
            </li>
        <li id="menu-linkbuilding" class="menu-seo"><span class="arrowout3"></span><a href="#">Link-Building</a>
        <div class="menu-seo-desc"></div>
            </li>
        <li id="menu-localseo" class="menu-seo"><span class="arrowout4"></span><a href="#">Local SEO</a>
        <div class="menu-seo-desc"></div>
            </li>
    </ul>

and jquery

 $(".menu-seo").hover(function(){
              $(this).find(".menu-seo-desc").slideDown(300);
        },function(){
              $(this).find(".menu-seo-desc").slideUp(300).end();
        });



$(".menu-seo-desc").hover(function(){
              $(this).show();
        },function(){
              $(this).slideUp(300).end();
        }
                       );