dropdown menu using css and jquery

Question

I'm trying to make a menu that's using css and jquery but i'm having problems for days now trying to figure out how to target the specific element.

here's my demo

CSS

    .contain {
    width:150px;
    height:150px;
    background-color:blue;
}
.contain:hover #arrow {
    cursor:pointer;
    display:block;
}
.show {
    display:block;
    background-color:green;
}
.hide {
    display:none;
}

JS

$("#arrow").click(function () {
    $("div > ul").css("display", "block");

});


$(".contain").mouseleave(function () {
    $(".contain > ul").css("display", "none");
});

Try to hover on that container, then click the arrow . the thing is they both show at the same time and i just can't figure my way out.. im new to jquery and i know this can be done.. please help.. btw, im not yet sure if these work on ie 8 and above but i have also to take these in mind... thanks in advance.

UPDATE: I guess i asked somewhat the wrong question, cause i needed to code it without using ID, cause each "profile" will be unique and be controlled by the backend guys and my only choice was to control CSS using jquery (as far as my knowledge goes). I did tried using pure CSS, but i am having problems with ":active" in IE =( so i look up on jquery and hopefully all is set. thanks all!!!

Answer 1

Here's the FIDDLE

in jquery:

$("div.arrow").click(function () {
    $(this).next('ul').css("display", "block");

});


$(".contain").mouseleave(function () {
    $(".contain > ul").css("display", "none");
});

in html:

update <div id="arrow" to <div class="arrow"

Note: You can use id only once instead use class if you want to use it on several elements. Ok? :)