Welcome Login

Simple dropdown horizontal menu


Css

Eg:

Full html and css enclosed:

<html>
<head>
<style type="text/css">
    ul {
        font-family: Arial, Verdana;
        font-size: 14px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    ul li {
        display: block;
        position: relative;
        float: left;
    }
    li ul { display: none; }
    ul li a {
        display: block;
        text-decoration: none;
        color: #ffffff;
        border-top: 1px solid #ffffff;
        padding: 5px 15px 5px 15px;
        background: #2C5463;
        margin-left: 1px;
        white-space: nowrap;
    }
    ul li a:hover { background: #617F8A; }
    li:hover ul {
        display: block;
        position: absolute;
    }
    li:hover li {
        float: none;
        font-size: 11px;
    }
    li:hover a { background: #617F8A; }
    li:hover li a:hover { background: #95A9B1; }
</style>
</head>

<body>
    <ul id="menu">
        <li><a href="">Home</a></li>
        <li><a href="">About Us</a>
            <ul>
                <li><a href="">The Team</a></li>
                <li><a href="">History</a></li>
                <li><a href="">Vision</a></li>
            </ul>
        </li>
        <li><a href="">Products</a>
            <ul>
                <li><a href="">Cozy Couch</a></li>
                <li><a href="">Great Table</a></li>
                <li><a href="">Small Chair</a></li>
                <li><a href="">Shiny Shelf</a></li>
                <li><a href="">Invisible Nothing</a></li>
            </ul>
        </li>
        <li><a href="">Contact</a>
            <ul>
            <li><a href="">Online</a></li>
            <li><a href="">Right Here</a></li>
            <li><a href="">Somewhere Else</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

Created on: Wednesday, March 9, 2011 by Andrew Sin