Reciban un cordial saludo y de antemano agradezco todas las respuestas. A continuación detallo el cosdigo CSS y el HTML de un menu desplegable que utilizo en un blog, desearia saber como centrar el menu de forma que no aparezca alineado a la izquierda como aparece por defecto.
Codigo CSS
#menu { height:34px; position:relative; background: #5BB0DB; margin: 10px 0;}
#nav { margin:0 5px; padding:0px; position:absolute; display:block;}
#nav > li { list-style-type:none; float:left; display:block; margin:0px 10px; position:relative; padding:10px; width:100px;}
#nav > li:hover ul { display:block; }
#nav > li:hover { background-color:#AAD4FF; filter: alpha(opacity=90); opacity: .9}
#nav li ul { margin:0px; padding:0px; display:none;}
#nav li ul li { list-style-type:none; margin:10px 0 0 0;}
#nav li ul li a { display:block; padding:5px 10px; color:#FFF; text-decoration:none;}
#nav li ul li:hover a { background-color:#5BB0DB; margin:0;}
#nav li span { cursor:pointer; margin:0 10px; font-weight:bold; color: #FFF;}
Codigo HTML
<div id='menu'>
<ul id='nav'>
<li><span>Menu 1</span>
<ul>
<li><a href='#'>Menu item 1</a></li>
<li><a href='#'>Menu item 2</a></li>
<li><a href='#'>Menu item 3</a></li>
</ul>
</li>
<li><span>Menu 2</span>
<ul>
<li><a href='#'>Menu item 1</a></li>
<li><a href='#'>Menu item 2</a></li>
<li><a href='#'>Menu item 3</a></li>
</ul>
</li>
<li><span>Menu 3</span>
<ul>
<li><a href='#'>Menu item 1</a></li>
<li><a href='#'>Menu item 2</a></li>
<li><a href='#'>Menu item 3</a></li>
</ul>
</li>
</ul>
</div>
