Question

I think I have a simple problem but I can’t see the solution.
When I’m mouseenter the “one”-div (only menu-top!) it expands correctly, but if I mouseout the “one”-div it collapse, BUT IT SHOULD NOT! I put on my JS file that it should first collapse if I the mouse leaves “oneX” -div (the container for the menu-points!)

Here the code:
HTML

<div id="root">
            <div style="height:50px;width:100%;"></div>
                <div id="one" class="menuTop">
                    <div style="clear:both;position:absolute;">
                        <div id="oneX" class="menuPointCon">
                            <div class="menuTopHover">Oh shit</div>
                            <div class="menuPoint">awefwafe</div>
                            <div class="menuPoint">wqdwaed</div>
                            <div class="menuPoint">gsregser</div>
                        </div>
                    </div>
                </div>
                <div id="two" class="menuTop">
                    <div style="clear:both;position:absolute;">
                        <div id="twoX" class="menuPointCon">
                            <div class="menuTopHover">Oh shit</div>
                            <div class="menuPoint">awefwafe</div>
                            <div class="menuPoint">wqdwaed</div>
                            <div class="menuPoint">gsregser</div>
                        </div>
                    </div>
                </div>
                <div id="three" class="menuTop">
                    <div style="clear:both;position:absolute;">
                        <div id="threeX" class="menuPointCon">
                            <div class="menuTopHover">Oh shit</div>
                            <div class="menuPoint">awefwafe</div>
                            <div class="menuPoint">wqdwaed</div>
                            <div class="menuPoint">gsregser</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

CSS

#root {
    width:600px;
    height:300px;
    background-color:red;
}
.menuTop {
    float:left;
    width:200px;
    height:50px;
    background-color:blue;
}
.menuPointCon {
    position:relative;
    background-color:green;
    display:none;
}
#one {
}
#two {
}
#three {
}
#oneX{
}
#twoX{
}
#threeX {
}
.menuTopHover {
    position:relative;
    width:200px;
    height:50px;
    color:white;
}
.menuPoint {
    position:relative;
    width:200px;
    height:50px;
    color:white;
}

jQuery / JS

$(document).ready(function(){
    $("div#one").mouseenter(function() {
        $("div#oneX").slideDown("normal");
    });
    $("div#oneX").mouseout(function() {
        $("div#oneX").slideUp("normal");
    });
});

Answer 1

I think you should use mouseleave() instead of mouseout()