横長に降りるドロップダウンメニュー

Result

jQuery

$(document).ready(function() {
    //ホバーイベント
    $("ul#topnav li").hover(function() {
        //背景カラーを与える
        $(this).css({
            'background': '#eee'
        });
        //li要素からspan要素を探して表示する
        $(this).find("span").show();

    }, function() {
        //マウスが外れたら非表示に戻す
        $(this).css({
            'background': 'none'
        });
        $(this).find("span").hide();
    });
});

css

ul#topnav {
    margin-bottom: 50px; padding: 0;
    float: left;
    width: 700px;
    list-style: none;
    position: relative;
    font-size: 1.2em;
    background: #ffa6a6 !important;
}
ul#topnav li {
    float: left;
    margin: 0; padding: 0;
    border-right: 1px solid #9a9a9a;
}
ul#topnav li a {
    padding: 10px 15px;
    display: block;
    color: #444;
    text-decoration: none;
}
ul#topnav li:hover { background: #eee ; }
ul#topnav li span {
    float: left;
    padding: 15px 0;
    position: absolute;
    left: 0; top:35px;
    display: none;
    width: 700px;
    background: #eee;
    color: #000;

}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}

html

<ul id="topnav"> 
<li><a href="#">タブ1</a>
     <span><a href="#">タブ1-1</a>|<a href="#">タブ1-2</a></span>
    </li> 
<li><a href="#">タブ2</a>
    <span><a href="#">タブ2-1</a>|<a href="#">タブ2-2</a>|<a href="#">タブ2-3</a></span>
    </li> 
<li><a href="#">タブ3</a>
    <span><a href="#">タブ3-1</a>|<a href="#">タブ3-2</a>|<a href="#">タブ3-3</a>|<a href="#">タブ3-4</a></span> 
    </li> 
<li><a href="#">タブ4</a></li> 
</ul>

via

Horizontal Subnav