Como centro un <ul> ?????????

[danistrein]

hola gente miren :

Código HTML:

<div id="menu">
<ul id="nav">
	<li><a href="?id=inicio">Inicio</a></li>
    
    <li><a>Musica</a>
    <ul class="submenu">
    <li><a href="?id=Alternativo">Alternativo</a></li>
    <li><a href="?id=Baladas">Baladas</a></li>
    <li><a href="?id=BaladasDeOro">BaladasDeOro</a></li>
    <li><a href="?id=Bachatas">Bachatas</a></li>
    <li><a href="?id=Cumbia">Cumbia</a></li>
    <li><a href="?id=CumbiaVillera">CumbiaVillera</a></li>
    <li><a href="?id=Dance">Dance</a></li>
    <li><a href="?id=Electronica">Electronica</a></li>
    <li><a href="?id=HipHop">HipHop</a></li>
    <li><a href="?id=Metal">Metal</a></li>
    <li><a href="?id=Pop">Pop</a></li>
    <li><a href="?id=Reggae">Reggae</a></li>
    <li><a href="?id=Reggaeton">Reggaeton</a></li>
    <li><a href="?id=Rock">Rock</a></li>
    <li><a href="?id=RockEnEspanol">RockenEspanol</a></li>
    </ul></li>


    <li><a href="?id=contacto">Contacto</a></li>
</ul>
</div> 

tengo ese menu el css es este:

Código HTML:

* { padding:0px; margin:0px; }

#menu { 
z-index: 9999;
}

#nav { 
list-style:none; 
}

#nav li { 
float:left;  
background-repeat:no-repeat; 
background-position:right; 
}

#nav li a { 
display:block; 
padding:7px 10px; 
text-decoration:none; 
color:#CCCCCC; 
font-weight:bold; 
}

#nav li a:hover { 
color:#FFFFFF; 
}

/* Submenu */
#nav ul.submenu { 
border:1px solid #000000; 
padding:5px; 
position:absolute; 
list-style:none; 
background-color:#333333;

}

#nav ul.submenu li { 
float:none; 
background-image:none; 
border-bottom:1px solid #999999; 
width:200px;
}

/* Subsubmenu */
#nav ul.subsubmenu { 
border:1px solid #000000; 
padding:5px; position:absolute; 
list-style:none; 
background-color:#333333; 
margin-left:150px; 
margin-top:-30px;
}

#nav ul.subsubmenu li { 
float:none; 
background-image:none; 
border-bottom:1px solid #999999; 
min-width:200px;
}

el tema es que quiero que se centre el menu como ago eso?