ネストにも対応したドロップダウンメニュー

Result

jQuery

$(function() {
    //li要素にマウスホバーでスライドダウン/アップのイベント発火
    $("ul.main-menu li").hover(function() {
        $(">ul:not(:animated)", this).slideDown(500);
    }, function() {
        $(">ul", this).slideUp(300);
    });
});

css

ul.main-menu li{
    float: left;
    width: 120px;
    height: 38px;
    background: #ccc;
    position: relative;
}

ul.main-menu li a:hover{
    background: #f0f0f0;
}
ul.main-menu li a{
    display: block;
    width: 100%;
    height: 100%;
    line-height: 38px;
    text-indent: 10px;
    text-decoration: none;
    position:relative;
}

ul.main-menu li ul.sub-menu{
    position: absolute;
    display: none;
}

ul.sub-menu li{
    float:none;   
}
ul.sub-menu li ul.sub-menu{
    top:0;
    left:120px;
}
ul.main-menu:after{
    content:".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

html

<ul class="main-menu">
    <li>
        <a href="#">メニュー1</a>
        <ul class="sub-menu">
            <li><a href="#">メニュー1-1</a></li>
            <li><a href="#">メニュー1-2</a>
                <ul class="sub-menu">
                    <li><a href="#">メニュー1-2-1</a></li>
                    <li><a href="#">メニュー1-2-2</a></li>
                    <li><a href="#">メニュー1-2-3</a></li>
                </ul>
            </li>
            <li><a href="#">メニュー1-3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">メニュー2</a>
        <ul class="sub-menu">
            <li><a href="#">メニュー2-1</a></li>
            <li><a href="#">メニュー2-2</a></li>
            <li><a href="#">メニュー2-3</a>
                <ul class="sub-menu">
                    <li><a href="#">メニュー2-3-1</a></li>
                    <li><a href="#">メニュー2-3-2</a>
                        <ul class="sub-menu">
                            <li><a href="#">メニュー2-3-2-1</a></li>
                            <li><a href="#">メニュー2-3-2-2</a></li>
                            <li><a href="#">メニュー2-3-2-3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">メニュー2-3-3</a></li>
                </ul>
            </li>
            
        </ul>
    </li>
    <li>
        <a href="#">メニュー3</a>
        <ul class="sub-menu">
            <li><a href="#">メニュー3-1</a></li>
            <li><a href="#">メニュー3-2</a></li>
            <li><a href="#">メニュー3-3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">メニュー4</a>
        <ul class="sub-menu">
            <li><a href="#">メニュー4-1</a></li>
            <li><a href="#">メニュー4-2</a></li>
            <li><a href="#">メニュー4-3</a></li>
        </ul>
    </li>
    
</ul>