Tengo el siguiente de código el cual saque de un foro que es de un menú desplegable, pero lo quiero tener centrado, supuestamente en el foro te da el código ya centrado pero no, y he estado investigando sobre como centrarlo en distintas páginas pero sin suerte no he encontrado nada y en realidad no se cómo hacerlo.
Si me pueden ayudar, muchas gracias, lo necesito. Aquí el código:
Las partes que se agregaron supuestamente al código para centrarlo están en forma de comentarios para poder identificarlos
<html>
<head>
<title>Menu Desplegable</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
#header {
margin:auto;
width:500px;
font-family:Arial, Helvetica, sans-serif;
}
ul, ol {
list-style:none;
}
.nav {
width:500px; /*Le establecemos un ancho*/
margin:0 auto; /*Centramos automaticamente*/
}
.nav > li {
float:left;
}
.nav li a {
background-color:#000;
color:#fff;
text-decoration:none;
padding:10px 12px;
display:block;
}
.nav li a:hover {
background-color:#434343;
}
.nav li ul {
display:none;
position:absolute;
min-width:140px;
}
.nav li:hover > ul {
display:block;
}
.nav li ul li {
position:relative;
}
.nav li ul li ul {
right:-140px;
top:0px;
}
</style>
</head>
<body>
<div id="header">
<nav> <!-- Aqui estamos iniciando la nueva etiqueta nav -->
<ul class="nav">
<li><a href="">Inicio</a></li>
<li><a href="">Servicios</a>
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a></li>
<li><a href="">Submenu4</a>
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a></li>
<li><a href="">Submenu4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Acerca de</a>
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a></li>
<li><a href="">Submenu4</a></li>
</ul>
</li>
<li><a href="">Contacto</a></li>
</ul>
</nav><!-- Aqui estamos cerrando la nueva etiqueta nav -->
</div>
</body>