CSSは階層化menu barを確立する.
1812 ワード
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 >>
<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>
効果: