Ciao a tutti, ho questo codice HTML:

codice:
<div id="menu">
<div class="menuwrapper">
<div class="menunav">
<ul class="font" >[*]Home[/list]
</div>
<div class="usernav">
<ul class="usernav">[*]Home[/list]
</div>
</div>
</div>
e questo CSS:

codice:
#menu { background-color: #3a3a3a; line-height: 31px; overflow: hidden; width: 100%; line-height: 24pt; }
#menu ul { margin:0; list-style-type:none; padding:0; }
#menu ul li { display: inline; margin: 0 10px; }
#menu ul li a:link, #menu ul li a:visited {	color: #fff; text-decoration: none; font-size: 13px; padding: 5px 0px 5px 20px; }
#menu ul li a:hover { color: #e7e7e7; text-decoration: none; font-size: 13px; }
.menuwrapper { width: 960px; overflow:hidden; margin: 0 auto; }
.menunav { float: left; }
.usernav { float: right; }

.register{ background-image: url("../images/register.png"); background-position: left; background-repeat: no-repeat; }
.login{ background-image: url("../images/login.png"); background-position: left; background-repeat: no-repeat; }
.logout{ background-image: url("../images/logout.png"); background-position: left; background-repeat: no-repeat; margin: 0.83em 0; padding: 0; font-family: 'Open Sans', 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; font-weight: 200; font-size: 12pt; letter-spacing: 0.01em; line-height: 24pt; }
.utente { color: #fff; }
.font { font-family: 'Open Sans', 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; font-weight: 200; font-size: 12pt; letter-spacing: 0.01em; line-height: 24pt; }

e vorrei creare, da questo menu, un menu a tendina. Lo chiedo perché se metto un[*] dentro un altro[*] succede un casino, ovviamente credo perché non ho dichiarato nessuna regola css per questa situazione ma sinceramente non so come fare :/

Se il codice è incasinato, mi potreste suggerire qualcosa di più leggero?

GRAZIE MILLE!!