Centrar textos de submenus

[josebr1991]

Hola, estoy intentando centrar el texto de un menu desplegable de dos categorias de mi pagina web (trabajos realizados y sigueme en facebook, twitter )y por mas que he probado no lo consigo

la pagina es esta http://reparotuordenador.com/www/index.php


Aqui el menu.php

Código:

<div id="menu">
<ul>
  <li class="nivel1"><a href="index.php" class="nivel1">Inicio</a>

  </li>
  <li class="nivel1"></li>
  <li class="nivel1"><a href="servicios.php" class="nivel1">Servicios</a></li>
  <li class="nivel1">      </li>
  <li class="nivel1"><a href="etapas.php" class="nivel1">Donde Estoy</a>
    <ul>

    </ul>
  </li>

   
  <li class="nivel1"><a href="#" class="nivel1">Trabajos Realizados</a>
    <ul>
      <li><a href="#">Webs</a></li>
      <li><a href="#">Reparaciones</a></li>

    </ul>
  <li class="nivel1"><a href="http://www.forosdelweb.com" class="nivel1">Sigueme en</a>

	<ul>
		<li><a href="https://www.facebook.com/PenyaCiclistaVaraDeQuart">Facebok</a></li>
		<li><a href="#">Twitter</a></li>
	</ul>
</li>
<li class="nivel1"><a href="consulta.php" class="nivel1">Contacto</a>

</li>

</ul>
</div>

y aqui el menu .css

Código:

* { margin: 0px;
padding: 0px; outline: 0;
}
#menu {
	text-align: center;
	font-size: 12px;
	width: 990px;
	margin: 10px auto;
	font-family: 'Dosis', sans-serif;
	font-weight: bold;
}
#menu ul { list-style-type: none;}
#menu ul li.nivel1 { float: left;
margin-right: 0px;
}
#menu ul li a {
	display: block;
	text-decoration: none;
	color: #fff;
	background-color: #999;
	position: relative;
	padding-top: 11px;
	padding-right: 80.4px;
	padding-bottom:10px;
	padding-left: 20px;
}

}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #CCC;
color: #000;
position: relative;
}
#menu ul li a.nivel1 {display: block!important;display: none;
position: relative;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;center: 0px;
}
#menu ul li ul li a {
	width: 156px;
	padding: 15px 12px 15px 0px;
	border-top-color: 0000;
	text-align: center;
}
#menu ul li ul li a:hover {border-top-color: #000;
position: relative;
}
table.falsa {border-collapse:collapse;
border:0px;
float: center;
position: relative;
}

gracias de antemano

[MarioAraque]

Por lo que veo está centrado ya, verdad?

[josebr1991]

Hola, se supone que esta centrado, pero al abrir el submenu de trabajos realizados sale hacia la izquierda

[MarioAraque]

Debes quitar el width:165px del selector #menu ul li ul li a y añadir un width: 100% al selector: #menu ul li a:hover ul, #menu ul li:hover ul

Eso debería solucionar todo.

Saludos.

[josebr1991]

Hola, ahora me sale a la izquierda los submenus y el texto centrado, es posible conseguir texto y submenus centrados? gracias

[Mikmoro]

Puedes probar quitando el position absolute a esta regla:
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;center: 0px;
}
y añadir esto a esta otra:
#menu ul li ul li a {
width: 156px;
margin: 0 auto;
padding: 15px 12px 15px 0px;
border-top-color: 0000;
text-align: center;
}

Es decir, que te quede:
#menu ul li ul {display: none;}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;}
#menu ul li ul li a {
width: 156px;
margin: 0 auto;
padding: 15px 12px 15px 0px;
border-top-color: 0000;
}

A ver si es lo que buscas.

[josebr1991]

Si asi sale perfectamente centrado tanto texto como submenu, pero me ha salido un nuevo problema, al ir a uno de los dos submenus el texto de la pagina principal se cambia de posicion, mientras pase el raton por esos submenus

[josebr1991]

Hola de nuevo, ya lo he solucionado, muchas gracias, he te tenido que bajar unos parrafos para arreglarlo

[Mikmoro]

Claro, es lógico. Para evitarlo y poder centrar eso deberás usar la posición alsoluta, dar tamaño fijo al submenú y utilizar la manera típica de centrado, es decir: desplazar el 50% del lateral y restar la mitad de su tamaño con margen negativo

#menu ul li.nivel1 { float: left;
margin-right: 0px;position: relative;
}

#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left:50%;margin-left: -84px;}

[josebr1991]

muchas gracias, una cosa que me quito de encima, a ver que mas le añado jeje