Simple Menu Pattern

by Mansfield

HTML

<div class="menu">
<ul>
    <li><a href="...">Menu Item</a>
        <ul>
            <li><a href="...">Sub Item</a></li>
            <li><a href="...">Sub Item</a></li>
        </ul>
    </li>
    <li><a href="...">Menu Item</a></li>
</ul>
</div>

CSS

.menu ul, .menu li {
    padding:0;
    margin:0;
    list-style-type:none
}

.menu li {
    display:inline-block;
    position:relative;
}

.menu a {
    font-family:arial;
    text-decoration:none;
    display:block;
    background-color:#c0c0c0;
    padding:3px;
    color:#000000
}

/* level two */

ul ul {
    position:absolute;
    display:none;    
}

ul ul a {
     background-color:#d0d0d0;
     margin-top:3px;   
}