2 Cấp: click vào menu mẹ ra menu con

<script type="text/javascript">
window.onload=tinhthuong_submenu;
function tinhthuong_submenu(obj) {
    var HTLT = document.getElementById(obj);
    for (var i = 1; i<=20; i++) {
        if (document.getElementById('submenu'+i)) {
            document.getElementById('submenu'+i).style.display='none';
        }
    }
    if (HTLT) {HTLT.style.display='block';}
}
</script>

<style type="text/css">
dl, dt, dd, ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#menu {
    width: 180px;
}
#menu dt {
    text-align: left;
    cursor: pointer;
    line-height: 24px;
    font-weight: bold;
    border: #C2C2C2;
    border-style: solid;
    border-left-width: 1px;
    border-top-width: 1px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-top-color: #0000FF;
    border-lefy-color: #0000FF;
    border-bottom-color: #CFCFCF;
    border-right-color: #CFCFCF;

    background: #A60000;
    Color: #FFFFFF
}


#menu dd {
    border: 0px solid #FF0000;
}
#menu {
    margin:0px;
    position:absolute;
    top:4px;
    left:4px;
}
#menu li a, #menu dt a {
    color: #FFFFFF;
    text-decoration: none;
    display: block;
    border: 1 ;
    height: 100%;
}
#menu li {
    text-align: left;
    font-weight:bold;
    background: #00CCFF;
    border: 1px solid #FFFF00;
}
#menu li a:hover, #menu dd a:hover, #menu dd a:hover {
    background: #FAA518;
    font-family:Times New Roman;
    font-weight:bold;
    color:#FFFFFF
}

#menu dt a:hover {
    background: #C2C2C2;
    font-family:Times New Roman;
    font-weight:bold;
    color:#FFFFFF
}


</style>
<dl id="menu">

    <dt onclick="javascript:tinhthuong_submenu('submenu1');" title="Click">Menu 1</dt>
    <dd id="submenu1">
        <ul>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 1-1</a></li>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 1-2</a></li>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 1-3</a></li>
        </ul>
    </dd>

    <dt onclick="javascript:tinhthuong_submenu('submenu2');" title="Click">Menu 2</dt>
    <dd id="submenu2">
        <ul>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 2-1</a></li>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 2-2</a></li>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 2-3</a></li>
        </ul>
    </dd>

    <dt onclick="javascript:tinhthuong_submenu('submenu3');" title="Click">Menu 3</dt>
    <dd id="submenu3">
        <ul>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 3-1</a></li>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 3-2</a></li>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 3-3</a></li>
        </ul>
    </dd>

    <dt onclick="javascript:tinhthuong_submenu('submenu4');" title="Click">Menu 4</dt>
    <dd id="submenu4">
        <ul>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 4-1</a></li>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 4-2</a></li>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 4-3</a></li>
        </ul>
    </dd>

    <dt onclick="javascript:tinhthuong_submenu('submenu5');" title="Click">Menu 5</dt>
    <dd id="submenu5">
        <ul>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 5-1</a></li>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 5-2</a></li>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 5-3</a></li>
        </ul>
    </dd>


</dl>