CSS建立分层menu bar.

Html:

<style>
#navUL {
    margin: 0;
    padding: 0;
    height: 1em;
}

#navUL li {
    list-style: none;
    float: left;
}

#navUL li ul {
    display: none;
    width: 14em; /* Width to help Opera out */
    background-color: #69f;
    float: left;
}

#navUL li:hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0;
}
   
#navUL li:hover li {
    float: none;
}
</style>

<ul id="navUL">
    <li class="menuitem" id="mtMenu" >Maintenance &gt&gt
        <ul id="mtUL">
            <li class="menuitem" id="frMenu" onclick="window.location='listFundReload.action?module=1'">FUND RELOAD</li>
            <li class="menuitem" id="frbMenu" onclick="window.location='listFundReloadBulk.action?module=2'">FUND RELOAD BULK</li>
            <li class="menuitem" id="aoMenu" onclick="window.location='listAssetmeasureOverride.action?module=3'">ASSETMEASURE OVERRIDE</li>
            <li class="menuitem" id="fcMenu" onclick="window.location='listFundComposition.action?module=4'">FUND COMPOSITION</li>
        </ul>
    </li>
    <li class="menuitem" id="tcMenu" onclick="window.location='listTranche.action'">Tranche Setup</li>
    <li class="menuitem" id="crMenu">Copy Rule</li>
</ul>

 

效果：