Tilføj ekstra niveau til CSS + XHTML menu

Hej eksperter.

Jeg har en XHTML dropdown menu som bliver styled med CSS. XHTML strukturen ser ud som følger:

<div id="navigation">
        <ul id="nav">
            <li><a href="#">FORSIDE</a></li>
            <li><a href="#">OM OS</a></li>
                <ul>
                    <li><a href="#">ABC</a></li>
                    <li><a href="#">XYZ</a></li>
                </ul>
        </ul>
</div>

Det giver mig en dropdown menu med hovedmenuer og en enkelt niveau derunder.

Nu vil jeg gerne udvide med et ekstra niveau så ABC og XYX elementerne ligeledes kan få undersider. Altså et ekstra niveau af <ul> og <li>.

Jeg anvender følgende CSS for at opnå det første niveau for dropdown menuen:

#navigation
{
    cursor: pointer;
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
    font-family: "trebuchet ms" ,arial,helvetica;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: #000;
    color: #FFF;
    height: 22px;
    padding-left: 31px;
    padding-right: 31px;
}


#nav, #nav ul
{
    padding: 0;
    margin: 0;
    list-style: none;
    height: 22px;
    line-height: 16px;
    background: #000;
}

#nav li
{
    float: left;
    text-align: left;
    background-color: #000;
    font-weight: normal;
    letter-spacing: 1pt;
    height: 100%;
}

#nav li li
{
    background-color: #FFF;
    clear: both;
    border-left: solid 1px #000;
    border-right: solid 1px #000000;
}

#nav li li.Bottom
{
    clear: both;
    border-bottom: solid 1px #000;
}

#nav li ul
{
    position: absolute;
    left: -999em;
    margin: 0;
    width: 200px;
}

#nav li:hover ul
{
    left: auto;
}

#nav li:hover ul, #nav li.sfhover ul
{
    left: auto;
}

#nav a
{
    font-size: 8pt;
    display: block;
    text-decoration: none;
    padding: 2px 10px 4px 10px;
    color: #FFF;
    text-transform: uppercase;
}

#nav a:hover
{
    font-size: 8pt;
    display: block;
    text-decoration: none;
    color: #FFF;
}

#nav li ul a
{
    font-size: 8pt;
    font-weight: normal;
    text-decoration: none;
    padding: 2px 10px 4px 10px;
    color: #000;
    width: 200px;
    text-transform: none;
}


#nav li ul a:hover
{
    font-size: 8pt;
    font-weight: normal;
    text-decoration: none;
    background-color: #FFDD00;
    color: #000;
}

Er der nogen der kan hjælpe mig med at udvide CSS'en så det ekstra niveau (<ul>+<li>) bliver stylet som nye under-undersider.

På forhånd tak.