<!DOCTYPE html>
<html lang="ja">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
    <title>pull-down menu</title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style type="text/css">
ul.main-menu li{
    float: left;
    width: 120px;
    height: 22px;
    background: #ddd;
    position: relative;
    list-style:none;
    font-size: small;
    -webkit-box-shadow:0 1px 13px rgba(0,0,0,0.8);
    -moz-box-shadow:0 1px 13px rgba(0,0,0,0.8);
    box-shadow:0 1px 13px rgba(0,0,0,0.8);
}

ul.main-menu li a:hover{
    background: #f0f0f0;
}
ul.main-menu li a{
    display: block;
    width: 100%;
    height: 100%;
    line-height: 20px;
    text-indent: 10px;
    text-decoration: none;
    position:relative;
    font-size: x-small;
    color:black;
}

ul.main-menu li ul.sub-menu{
    position: absolute;
    padding: 0px;
    display: none;
    list-style:none;
}

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

<ul class="main-menu">
    <li>
        <a href="#">ファイル</a>
        <ul class="sub-menu">
            <li><a href="#">新規作成</a>
                <ul class="sub-menu">
                    <li><a href="#">HTML</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">JavaScript</a></li>
                </ul>
            </li>
            <li><a href="#">開く</a></li>
            <li><a href="#">閉じる</a></li>
            <hr>
            <li><a href="http://park15.wakwak.com/~k-lovely/cgi-bin/wiki/wiki.cgi?page=memo">終了</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>
                <ul class="sub-menu">
                    <li><a href="#">メニュー2-2-1</a></li>
                    <li>メニュー2-2-2</li>
                    <li><a href="#">メニュー2-2-3</a></li>
                    <li><a href="#">メニュー2-2-4</a></li>
                    <li><a href="#">メニュー2-2-5</a></li>
                </ul>
            </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>
    <li>
        <a href="#">logout</a>
    </li>
</ul>

<script type="text/javascript">
$(function() {
    $("ul.main-menu li").hover(function() {
        $(this).children('ul').show();
    }, function() {
        $(this).children('ul').hide();
    });
});
</script>