Drop Down Menu con tag NAV

[loris.fasolo]

Ciao a tutti, sono nuovo del forum. Purtroppo con il CSS sono assolutamente negato, per questo motivo, alcune volte prendo codici già fatti o uso dei generatori online. In questo momento ho un menù creato con il tag NAV, al quale vorrei aggiungere la possibilità di inserire delle sottocategorie (ossia, creare un drop down menu). Il problema è che non riesco proprio a capire come fare.

Di seguito vi posto il codice CSS:

/* Header */


    body.landing #header {
        background-color: transparent;
        left: 0;
        position: absolute;
        top: 0;
    }


    #header {
        background-color: #202222;
        color: #ffffff;
        cursor: default;
        height: 4.75em;
        line-height: 4.75em;
        width: 100%;
        z-index: 10000;
    }


        #header h1 {
            color: #ffffff;
            height: inherit;
            left: 2.5em;
            line-height: inherit;
            margin: 0;
            padding: 0;
            position: absolute;
            top: 0;
        }


            #header h1 a {
                font-size: 1.25em;
            }


        #header nav {
            height: inherit;
            line-height: inherit;
            position: absolute;
            right: 2.75em;
            top: 0;
            vertical-align: middle;
        }


            #header nav > ul {
                list-style: none;
                margin: 0;
                padding-left: 0;
            }


                #header nav > ul > li {
                    border-radius: 4px;
                    display: inline-block;
                    margin-left: 1.5em;
                    padding-left: 0;
                }


                    #header nav > ul > li a {
                        -moz-transition: color 0.2s ease-in-out;
                        -webkit-transition: color 0.2s ease-in-out;
                        -o-transition: color 0.2s ease-in-out;
                        -ms-transition: color 0.2s ease-in-out;
                        transition: color 0.2s ease-in-out;
                        color: #cee8d8;
                        display: inline-block;
                        text-decoration: none;
                    }


                        #header nav > ul > li a:hover {
                            color: #ffffff;
                        }


                    #header nav > ul > li:first-child {
                        margin-left: 0;
                    }


                    #header nav > ul > li .button {
                        height: 2.25em;
                        line-height: 2.25em;
                        margin-bottom: 0;
                        padding: 0 1em;
                        position: relative;
                        top: -0.075em;
                        vertical-align: middle;
                    }


        #header .container {
            position: relative;
        }


            #header .container h1 {
                left: 0;
            }


            #header .container nav {
                right: 0;
            }

Mentre questo è quello del Menu in HTML:

<!-- Header -->
            <header id="header">
                <h1><a href="index.html">Logo</a></h1>
                <nav id="nav">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="aboutus.html">Chi Siamo</a></li>
                        <li><a href="#">Servizi</a></li>
                        <li><a href="whereareus.html">Dove Siamo</a></li>
                        <li><a href="contacts.html">Contatti</a></li>
                    </ul>
                </nav>
            </header>

Nella voce del menu "Servizi" vorrei inserire delle sottocategorie.

Vi ringrazio in anticipo per tutte le vostre risposte

[Mich_]

Ci sono ottime risorse online riguardo ai menu, anche a molti livelli.
Alcune sono state riportate tra i "link utili".
(A me piace come sono organizzati quelli di CSSplay)

Ricorda che cambiare la funzionalita` di un menu e` una cosa complessa, cambiarne i colori o gli sfondi e` molto semplice.