CSS-Only Menus

Dropdown Menus built with nothing but CSS.

by Troy Alford

HTML

<br/><br/>
<div class="menu-container">
    <ul class="menu">
        <li><a href="#">Menu Item 1</a>
            <ul>
                <li><a href="#">Submenu Item 1</a></li>
                <li><a href="#">Submenu Item 2</a></li>
            </ul>
        </li>
        <li class="spacer">&nbsp;</li>
        <li><a href="#">Menu Item 2</a></li>
        <li class="spacer">&nbsp;</li>
        <li class="last-item"><a href="#">Menu Item 3</a>
            <ul>
                <li><a href="#">Submenu Item 1</a></li>
                <li class="spacer">&nbsp;</li>
                <li><a href="#">Submenu Item 2</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

div.menu-container {
    background-color: #eee;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #666;
    display: block;
    height: 24px;
}

ul.menu, ul.menu li {
    list-style: none;
}

ul.menu {
    float: right;
    font-family: Calibri,Arial,Tahoma,sans-serif;
    font-size: 12px;
    height: 24px;
}

ul.menu li {
    float: left;
    position: relative;
    vertical-align: top;
}

ul.menu li>a {
    border: 1px solid transparent;
    color: #666;
    display: block;
    font-weight: bold;
    height: 14px;
    margin: 1px;
    padding: 3px 5px;
    text-decoration: none;
}
ul.menu li>a:hover {
    background-color: #fff;
    border: 1px solid #336699;
    color: #336699;
}

ul.menu li>ul,
ul.menu li>ul>li {
    display: block;
    float: none;
}

ul.menu li>ul {
    border: 1px solid #ddd;
    display: none;
    position: relative;
    top: -1;
    visibility: hidden;
}
ul.menu li:hover>ul {
    display: block;
    position: absolute;
    min-width: 100px;
    visibility: visible;
}
ul.menu li.last-item:hover>ul {
    right: 0;
}

ul.menu>li.spacer {
    border-left: 1px solid #666;
    border-right: 1px solid #fff;
    margin: 5px 2px;
    width: 0;
}
ul.menu li>ul>li.spacer {
    border-top: 1px solid #666;
    border-bottm: 1px solid #fff;
    margin: 2px 5px;
    height: 0;
}