非常样式的CSS Mega菜单

$(\'#menu span\').hide();
$(\'#menu li\').hover(function() {


var offset = $(this).offset();
$(this).find(\'span\').css(\'marginLeft\', offset.left + \'px\');
$(this).find(\'span\').show();

var offsetRight = offset.left + $(this).find(\'span\').width();
var ww = $(window).width();
var fixed = offset.left + $(this).width() - $(this).find(\'span\').width();

if (offsetRight > ww) {
    $(this).find(\'span\').css(\'marginLeft\', fixed + \'px\');
}
else {
    $(this).find(\'span\').css(\'marginLeft\', offset.left + \'px\');
}


}，function（）{
    $（this）.find（\'span \'）。hide（）;
}）;


CSS ...

#menu {
    margin: 20px;   
}
#menu LI {
    display: block;
    float: left;
    border-right: 1px solid #fff;
    background-color: #ccc;
    padding: 5px;
    cursor: pointer;

}
#menu SPAN {
    display: block;
    position: absolute;
    width: 200px;
    height: 100px;
    background-color: #E2E2E2;
    left: 0px;
    margin-top: 5px;
    padding: 5px;
}


HTML ...

<ul id=\"menu\">
    <li>The Quick<span>Quick</span></li>
    <li>Brown<span>Brown</span></li>
    <li>Fox<span>Fox</span></li>
    <li>Jumps<span>Jumps</span></li>
    <li>Over<span>Over</span></li>
    <li>Then<span>The</span></li>
    <li>Tall<span>Tall</span></li>
    <li>White<span>White</span></li>
    <li>Fence<span>Fence</span></li>
</ul>