entOnlineMenu

Online Menu

by markallgood

HTML

<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>
<ul class="menu">
    <li><a href="#">Home</a></li>
    <li class="selected">
        <a href="#">Accounts</a>
        <ul>
            <li class="selected"><a href="#">Summary</a></li>
            <li><a href="#">History Search</a></li>
            <li><a href="#">Open An Account</a></li>
            <li><a href="#">Apply For A Loan</a></li>
        </ul>
    <li>
    <li>
        <a href="#">Transfers</a>
        <ul>
            <li><a href="#">Menu 2a</a></li>
            <li><a href="#">Menu 2b</a></li>
            <li><a href="#">Menu 2c</a></li>
        </ul>
    <li>
    <li>
        <a href="#">Bill Pay</a>
        <ul>
            <li><a href="#">Menu 3a</a></li>
            <li><a href="#">Menu 3b</a></li>
            <li><a href="#">Menu 3c</a></li>
            <li><a href="#">Menu 3d</a></li>
            <li><a href="#">Menu 3e</a></li>
        </ul>
    <li>
</ul>

CSS

* /* "Universal rule". Set's border, padding and margin to 0 for all CSS values*/
{
padding: 0;
margin: 0;
border: 0;
}
body {
    font-size: small;
    font-family: 'Trebuchet MS',Trebuchet,Helvetica,Arial,sans-serif;
    color: #454545;
}
ul.menu {
    max-width: 939px;
    background: #274D7B;
    min-height: 22px;
    text-align: left; /* We are using text-align: left on ul to left align our menu to the page. If you want the menu aligned centered or right just change text-align to either center or right */
    margin: 5px 0 5px 10px;
    font-weight: bold;
}
ul.menu li {
    margin: 0 2px 0 0;
    display: inline; /* Menu links are horizontally aligned using display: inline */
}
ul.menu li a {
    padding: 0px 12px 0px 12px; /* Display: block won't work in this example, instead we are using padding */
    color: white;
    text-decoration: none;
    height: 22px;
    font-size: 11pt;
}
ul.menu li.selected a {
    color: #2A568F;
    padding-left: 14px;
    padding-right: 10px;
}
ul.menu > li.selected {
    margin: 0 3px 0 0;
    padding: 0px 6px 0px 8px; /* Display: block won't work in this example, instead we are using padding */
    color: #2A568F;
    background: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding-left: 14px;
    padding-right: 10px;
}
ul.menu li > ul {
    display: none;
    float: left;
    text-align: left; /* If both menus are going to be left-aligned we really don't need to use text-align: left on the sub menu, since this menu will inherit the alignment from .Menu */
    width: 100%;
    margin: 3px 0 3px 0;
    padding: 3px 0 3px 0;
    border-bottom: 2px solid gray;
}
ul.menu li.selected > ul {
    display: block;
}
* html ul.menu li > ul {
    margin: 2px 0 5px 0; /* IE hack */
}
ul.menu li > ul > li {
    padding: 3px 0 3px 0;
    border: 0;
}
ul.menu li > ul > li a {
    border: 0;
}
ul.menu li > ul > li a:hover {
    background: #d4de7c;
}
ul.menu li > ul > li.selected {
    padding: 3px 6px 3px...