On Hover sublist to drop down without extending the height of the div

Question

please guide me as i'm trying to learn.

1) I am trying to make this list to expand when it hover. It work on my browser but not on jsfiddle. But problem is it wont stop expand and shrink when I move my mouse over it several time.

2) How do I make the list by the time it expand, my div will got grow longer, everything stay inside the div. I have try overflow:hidden but it doesn't work.

3) The hover that I try to make in CSS was to only change the font color of the main name but it change color of the whole name.

my JFiddle http://jsfiddle.net/Y3tc6/1/

THE JQUERY

$(".subli").hide();
$(".mainli").on("click", function (e) {
    e.preventDefault();
    $(this).find(".subli").slideToggle();
});

Thank You

Answer 1

Try this:

$(".subli").hide();
$(".mainli").hover( function (e) {
    e.preventDefault();
    $(this).find(".subli").stop(true).slideToggle();
}

);

Answer 2

1) Use mouseenter and mouseleave

$(".subli").hide();

$(".mainli").mouseenter(function (e) {
    $(this).find(".subli").slideDown();
});

$(".mainli").mouseleave(function (e) {
    $(this).find(".subli").slideUp();
});

2 & 3) You need to be more specific in you CSS to get the colors right, and use block, max-height and overflow to make the height of the div constant

#droplist {
    display:block;
    max-height:250px;
    height:250px;
    width:250px;
    background-color:grey;
    overflow: hidden;
}

#droplist .mainli:hover li {
    color:initial;
}

#droplist .mainli:hover,
#droplist .mainli li:hover {
    color:red;
}

Working demo

Answer 3

2) How do I make the list by the time it expand, my div will got grow longer, everything stay inside the div. I have try overflow:hidden but it doesn't work.

#droplist {
    display:block;
    max-height:212px;
    width:250px;
    background-color:grey;
    overflow:auto;
}

3) The hover that I try to make in CSS was to only change the font color of the main name but it change color of the whole name.

#droplist > ul > li:hover {
    color:red;
}

#droplist li ul {
    color:#000;
}

JSFiddle http://jsfiddle.net/Y3tc6/4/

For more information of > on CSS.

CSS '>' selector; what is it?

Sorry if it's messy, on the 3rd number.

My last edit! XD

Answer 4

Try this:

$(".mainli").on("mouseover", function (e) {
    $(this).find(".subli").slideDown();

});
$(".mainli").on("mouseout", function (e) {
    $(this).find(".subli").slideUp();

});

You will have to make some css changes. But i think this will help you with your slide down and slide up