pop over

by Kiran Duggal

HTML

<div class="header">
    <ul class="menu">
    
        <li>TEST 6</li>
    </ul>
</div>
<div class="quickCourse">HULLO!</div>

CSS

.header ul.menu {
    float:left;
    list-style-type:none;
}
.header ul.menu li {
    float:left;
    padding:10px;
}
.quickCourse {
    position:absolute;
    margin:80px 0px 0px 0px;
    width:300px;
    height:30px;
    background:#000;
    display:none;
    color:#FFF;
    padding:50px;
    text-align:center;
}

JavaScript

$(document).ready(function () {
    $(".header ul.menu > li").mouseover(

    function () {
        $("div.quickCourse").fadeIn();
    });
    $(".header ul.menu > li, div.quickCourse").mouseleave(function () {
        $("div.quickCourse").fadeOut();
    });
    $("div.quickCourse").mouseover(function () {
        $(this).stop(true, true).show();
    });
});