CSS HTML. Vertical Menu cu Submenu

Exemplul ce urmeaza este destinat celor care au nevoie sa creeze un meniu HTML cu submeniuri, formatarea CSS  este destul de simpla iar meniul in sine este de fapt o lista de linkuri cu subliste.

Iata exemplul:
Codul HTML

<div id="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a>
                <ul>
                    <li><a href="#">Apple</a></li>
                    <li><a href="#">Orange</a></li>
                    <li><a href="#">Banana</a></li>
                    <li><a href="#">Grape</a></li>
                </ul>
            </li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Photos</a></li>
        </ul>
    </div>

Codul CSS

#nav{
    width:200px;
    background-color:#337ACF;
}
#nav ul{
    list-style:none;
    margin:0;
    padding:0;
}
#nav li{
    border-bottom:solid 1px #9FCBFF;
}
#nav li a:link, #nav li a:visited{
    font-size:0.9em;
    display:block;
    padding:0.4em 0 0.4em 0.5em;
    background-color:#4F9FFF;
    border-left: solid 12px #337ACF;
    border-right:solid 1px #337ACF;
    color:white;
    text-decoration:none;
}
#nav li a:hover{
    background-color:#337ACF;
    color:white;
}
#nav ul ul{
    margin-left:12px;
}
#nav ul ul li{
    border-bottom:#337ACF;
    border:0;
    margin:0;
}
#nav ul ul a:link, #nav ul ul a:visited{
    background-color:#6FB1FF;
    color:#337ACF;
}
#nav ul ul a:hover{
    background-color:#337ACF;
    color:white;
}

In imagine este reprezentarea grafica a meniului care l-am creat.