Showing/Hiding <div> Based on <li>.hover()

I'm making a menu that would display via .slideD开发者_运维百科own() a <div id="menuDiv"> based on which ID specified <li> of <div id="menuDiv">'s <ul> the cursor is under. Additionally, the <div id="menuDiv"> should .slideUp() when the cursor goes out of <div id="menuContainer"> except when the cursor goes down over the <div id="menuDiv"> itself.

I have this markup:

   <div id="menuContainer">
   <!-- this is styled to be your standard CSS <ul> menu (<ul>'s list-style: none; <li> float: right) -->
        <ul>
            <li id="overSlide1"><a href="#1" class="linkClass">Alpha</a></li>
            <li id="overSlide2"><a href="#2" class="linkClass">Beta</a></li>
            <li id="overSlide3"><a href="#3" class="linkClass">Gamma</a></li>
            <li id="overSlide4"><a href="#4" class="linkClass">Theta</a></li>
        </ul>
    </div>
    <div id="menuDiv">
    <!-- This is position right under the <div id="menuContainer"> via CSS -->
    </div>

and did this for the Jquery:

$(document).ready(function(){
    $("#overSlide1").hover(function(){
        $("#menuDiv").slideDown(250, function(){
        });
    }, function(){

    });

    $("#overSlide2").hover(function(){
        $("#menuDiv").slideUp(250, function(){
        });
    }, function(){

    });

    $("#overSlide3").hover(function(){
        $("#menuDiv").slideDown(250, function(){
        });
    }, function(){

    });

    $("#menuDiv").hover(function(){

    }, function(){
        $(this).slideUp(75);
    });
});

I'm having problems with "except when the cursor goes down over the <div id="menuDiv"> itself".

Try This

$(document).ready(function(){
    $("#overSlide1").mouseover(function(){
        $("#menuDiv").slideDown(250, function(){
        });
    };

    $("#overSlide1").mouseout(function(){
        $("#menuDiv").slideUp(250, function(){
        });
    };
 $("#overSlide2").mouseover(function(){
        $("#menuDiv").slideDown(250, function(){
        });
    };

    $("#overSlide2").mouseout(function(){
        $("#menuDiv").slideUp(250, function(){
        });
    };

 $("#overSlide3").mouseover(function(){
        $("#menuDiv").slideDown(250, function(){
        });
    };

    $("#overSlide3").mouseout(function(){
        $("#menuDiv").slideUp(250, function(){
        });
    };

 $("#overSlide4").mouseover(function(){
        $("#menuDiv").slideDown(250, function(){
        });
    };

    $("#overSlide4").mouseout(function(){
        $("#menuDiv").slideUp(250, function(){
        });
    };

});

This might be a little buggy, jquery is wierd sometimes doesn't work as expected. If this doesn't work for you, there are other ways, this was just the simplest way compared to what you already had. Just let me know and I will help more.