How can i center a dropdown menu bar? - html

Question

I want the bar to remain such as this, but the three menu options (along with the drop-down ) pass be at the center of the page.
The page have some img's (including de menu bar) that is not included.
header, footer, aside, nav, article {
display: block;
}
header h1{
color: #670C15;
text-align: center;
}
body {
margin: 0 auto;
width: 940px;
font: 13px/22px Helvetica, Arial, sans-serif;
background: #f5f5f1;
}
h1 {
font-size: 28px;
line-height: 30px;
padding: 10px 0;
}
h2 {
font-size: 23px;
line-height: 25px;
padding: 10px 0;
}
h3 {
font-size: 18px;
line-height: 20px;
padding: 11px 0;
}
p {
padding-bottom: 22px;
}
nav {
display: block;
position: absolute;
left: 0;
width: 100%;
background: url("nav_background.png");
}
nav ul {
padding: 0;
margin: 0;
}
nav ul:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/********************************/
nav li {
position: relative;
float: left;
list-style-type: none;
margin: 0 auto;
}
nav li a {
display: block;
padding: 10px 20px;
border-left: 1px solid #999;
border-right: 1px solid #222;
color: #777;
text-decoration: none;
}
nav li a:focus {
outline: none;
text-decoration: underline;
}
nav li:first-child a {
border-left: none;
}
nav li:hover ul {
display:block;
}
nav a span {
display: block;
float: right;
margin-left: 5px;
}
nav ul ul {
display: none;
width: 100%;
position: absolute;
left: 0;
background: #670C15;
}
/******************************/
nav ul ul li {
float: none;
}
nav ul ul a {
padding: 5px 10px;
border-left: none;
border-right: none;
font-size: 14px;
}
nav ul ul a:hover {
color: #fff;
}
nav ul li a:hover {
color: #fff;
}
nav ul a span {
-moz-transform:rotate(-180deg);
-webkit-transform:rotate(-180deg);
transform: rotate(-180deg);
}
#intro {
position: relative;
margin-top: 66px;
padding: 44px;
background: #467612 url("intro_background.png") repeat-x;
border-radius: 170px 50px;
}
#intro img {
position: absolute;
top: 0;
right: 0;
width: 470px;
height: 100%;
border-radius: 170px 50px;
}
#intro h2 {
position: relative;
z-index: 9999;
width: 600px;
padding: 0 0 0 0;
font-weight: bold;
}
#intro p {
position: absolute;
top: 0;
right: 0;
padding: 3% 0 0 0;
width: 400px;
z-index: 9999;
font-weight: bold;
}
#contenido {
display: table;
}
#contenidoPrincipal {
display: table-cell;
width: 620px;
padding-right: 22px;
}
aside {
display: table-cell;
width: 300px;
}
.blogPost div {
column-count: 2;
column-gap: 22px;
-moz-column-count: 2;
-moz-column-gap: 22px;
-webkit-column-count: 2;
-webkit-column-gap: 22px;
}
.blogPost img {
margin: 22px 0;
box-shadow: 3px 3px 7px #777;
width: 100%;
}
#comentarios {
margin-top: 21px;
padding-top: 22px;
border-top: 1px solid #d7d7d7;
}
#comentarios article {
display: table;
padding: 22px;
}
section#comentarios article:nth-child(2n+1) {
padding: 21px;
background: #E3E3E3;
border: 1px solid #d7d7d7;
border-radius: 11px;
}
#comentarios article header {
display: table-cell;
width: 220px;
padding-right: 22px;
}
#comentarios article header a {
display: block;
font-weight: bold;
color: #000;
}
#comentarios article header a:hover {
text-decoration: none;
}
#comentarios article p {
padding: 0;
}
form {
margin-top: 21px;
padding-top: 22px;
border-top: 1px solid #d7d7d7;
}
form p {
display: table;
margin-bottom: 22px;
padding: 0 22px;
}
form label {
display: table-cell;
width: 140px;
padding-right: 20px;
text-align: right;
font-weight: bold;
vertical-align: top;
}
form input[type="text"], form input[type="email"], form input[type="url"] {
display: table-cell;
width: 300px;
height: 20px;
border: 1px solid #d7d7d7;
}
form textarea {
width: 300px;
height: 100px;
border: 1px solid #d7d7d7;
}
form input[type="submit"] {
margin-left: 162px;
}
aside section {
margin: 22px 0 0 22px;
padding: 11px 22px;
background: url("sidebar_section_background.png") repeat-x;
}
aside section ul {
margin: 0 0 0 22px;
list-style: none;
}
aside section ul li a {
display: block;
text-decoration: none;
color: #000;
}
aside section ul li a: hover {
text-decoration: underline;
}
footer {
position: absolute;
left: 0;
width: 100%;
background: #681E1E;
}
footer div {
display: table;
margin: 0 auto;
padding: 44px 0;
width: 940px;
color: #777;
}
footer div section {
display: table-cell;
width: 300px;
}
footer div #acerca, footer div #otrosBlogs {
padding-right: 20px;
}
footer h3 {
color: #FFF;
}
footer a {
color: #999;
}
footer a:hover {
color: #FFF;
text-decoration: none;
}
footer ul {
margin: 0 0 0 40px;
list-style: square;
color: #565656;
}
footer ul li a {
display: block;
}
form p label{
color: #914F56;
}
<!doctype html>
<html>
<head id="titulo">
<title>Título de Página</title>
<link rel="stylesheet" href="estiloexpe.css" type="text/css" media="screen" />
</head>
<body>
<header>
<h1>Título de Página</h1>
</header>
<nav>
<ul>
<li>Inicio</li>
<li>
Archivo<span>^</span>
<ul>
<li> Submenú 1 </li>
<li> Submenú 2 </li>
<li> Submenú 3 </li>
</ul>
</li>
<li>Contacto</li>
</ul>
</nav>
<br><br><br><br>
<section id="intro">
<h2>Esta es una introducción de prueba.</h2>
<img src="intro_pebbles.png" alt="Image: Felixco, Inc. / FreeDigitalPhotos.net" />
<p>Cuando todo va mal te imagino sonriendo y se me pasa. <br> Ese es mi truco y esa es tu magia.</p>
</section>
<div id="contenido">
<div id="contenidoPrincipal">
<section>
<article class="blogPost">
<header>
<h2>Título del post.</h2>
<p> Escrito el <time datetime= "2016-02-08T09:20:45-06:00">23 de febrero de 2016
</time> por Genessis - Sin comentarios
</p>
</header>
<div>
<p>Para comprender el valor de un año, habla con el alumno que reprobó.
Para comprender el valor de un mes, habla con la madre de un bebé prematuro.
Para comprender el valor de una semana, habla con el redector de un semanario.
Para comprender el valor de un día, habla con el obrero que debe alimentar seis hijos.
</p>
<img src="DianaDardos.jpg" alt="Image: renjith krishnan / FreeDigitalPhotos.net" />
<p>Para comprender el valor de una hora, habla con los amantes que ansían verse.
Para comprender el valor de un minuto, habla con la persona que no alcanzo el tren.
Para comprender el valor de un segundo, habla con quien sobrevivió a un accidente.
Para comprender el valor de una milesima de segundo, habla con quien gano medalla de plata en las olimpiadas.
</p>
</div>
</article>
</section>
<section id="comentarios">
<header>
<h3>Comentarios</H3>
</header>
<article>
<header>
Juan Peacute el <time datetime= "2016-02-09T03:35:20-06:00">
23 de febrero del 2016 a las 12:50 am </time>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut.
</p>
</article>
<article>
<header>
Mafer Castillo el <time datetime="2012-02-09T11:40:09-06:00">
23 de febrero de 2016 a las 3:00 pm</time>
</header>
<p>Digamos que hoy me levante oto&ntildeal, pero hable contigo y ya tengo los bolsillos
llenos de veranos.
<p>Cuando quieras/puedas, ven a buscarlos.</b>
</p>
</article>
</section>
<form action="#" method="post">
<h3>Agregar comentario</h3>
<p>
<label for="Nombre">Nombre</label>
<input name="nombre" id="nombre" type="text" required />
</p>
<p>
<label for="email">Correo</label>
<input name="email" id="email" type="email" required />
</p>
<p>
<label for="website">Sitio Web</label>
<input name="website" id="website" type="url" />
</p>
<p>
<label for="comentario">Comentario</label>
<textarea name="comentario" id="comentario" required></textarea>
</p>
<p>
<input type="submit" value="Agregar Comentario" />
</p>
</form>
</div>
<aside>
<section>
<header>
<h3>Categorias</h3>
</header>
<ul>
<li> Lorem ipsum dolor. </li>
<li> Sit amet consectetur. </li>
<li> Adipisicing elit sed. </li>
<li> Do eiusmod tempor. </li>
<li> Incididunt ut labore. </li>
</ul>
</section>
<section>
<header>
<h3>Archivos</h3>
</header>
<ul>
<li> Enero 2012 </li>
<li> Diciembre 2011 </li>
<li> Noviembre 2011 </li>
<li> Octubre 2011 </li>
</ul>
</section>
</aside>
</div>
<footer>
<div>
<section id="Acerca">
<header>
<h3>Acerca de...</h3>
</header>
<p>
¿Que gano yo, si obtengo lo que ansío?
Un sueño, un aliento, una chispa de goce fugaz.
&iquestQuien cambiaria un momento de jubilo por una semana de llanto vacio?
&iquestO quien venderia la eternidad para tener un juguete y solaz?
&iquestO por una dulce uva, destruiria la vid y su haz?
</p>
</section>
<section id="otrosBlogs">
<header>
<h3>Otros Blogs</h3>
</header>
<ul>
<li> HTML5Tutoriales </li>
<li> HTML5tuto </li>
<li> HTML </li>
</ul>
</section>
<section id="popular">
<header>
<h3>Lo más popular</h3>
</header>
<ul>
<li> Ten confianza en ti mismo, y en todos los que te rodean </li>
<li> Fija metas que puedas alcanzar. </li>
<li> Habla con tus actos y no con tus palabras. </li>
</ul>
</section>
</div>
</footer>
</body>
</html>

Answer 1

Just a few minor CSS changes:
nav {
// remove position:absolute;
// remove left:0;
display: block;
width:auto;
background: url("nav_background.png");
}
nav ul{
padding:0;
margin: 0 auto;
width:24em; // ( or however many li elements you have at 8em width)
}
nav li {
width:8em; // (for example. Could be larger or smaller or px or %)
}