You were using float: left
to the li
elements.. so the ul
was with no width and height. Apply this CSS:
ul {
overflow: auto;
}
and also I made some changes in jQuery:
$(".item").on('mouseenter', mEnter)
$('ul').on('mouseleave', function () {
$('.item').stop();
$('.active').removeClass("active")
.addClass("item");
$(".item").show(700);
});
function mEnter() {
$(this).addClass("active");
$(this).removeClass("item");
$(".item").hide(700);
}
you were applying mouseleave
event to the individual hovered LI
element instead of the parent element i.e UL
.