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:
codice:
/* 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:

codice:
<!-- 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