menu ccs

skreal · #1 (**permalink**) 05/01/2014, 13:01

hola estoy intentando crear un menu similar a este

http://www.parquewarner.com/

como podria centrar mi menu? y si me pudieran solucionar con hacer que la imagen se sobreponga en el menu(el logo de warner) gracias

les adjunto mi codigo

Código HTML:

<head>
	<link rel="stylesheet" type="text/css" href="styles.css"></link>
</head>
<body>
<div id="menu">
<ul>
   <li><a href="index.html"><span><div class="icono"><img src="images/icono.jpg"></img></div></span></a></li>
   <li class="opcion"><a href="#"><span>Informaci&oacute;n</span></a>
      <ul>
         <li><a href="horarios.html"><span>Horarios</span></a></li>
         <li><a href="tarifas.html"><span>Tarifas</span></a></li>
         <li class="last"><a href="comollegar.html"><span>C&oacute;mo llegar</span></a></li>
      </ul>
   </li>
   <li><a href="#"><span>En el parque</span></a></li>
   <li class="opcion"><a href="#"><span>Eventos</span></a>
      <ul>
         <li><a href="colegios.html"><span>Colegios</span></a></li>
         <li><a href="eventosempresariales.html"><span>Eventos empresariales</span></a></li>
         <li class="last"><a href="salasyauditorias.html"><span>Salas y auditorias</span></a></li>
      </ul>
   </li>
   <li class="opcion"><a href="#"><span>Con&oacute;cenos</span></a>
      <ul>
         <li><a href="sobreelparque.html"><span>Sobre el parque</span></a></li>
         <li><a href="blog.html"><span>Blog</span></a></li>
         <li><a href="noticias.html"><span>Noticias</span></a></li>
         <li class="last"><a href="saladeprensa.html"><span>Sala de prensa</span></a></li>
      </ul>
   </li>
   <li class="opcion ultima"><a href="#"><span>Reservas</span></a>
      <ul>
         <li><a href="compraonline.html"><span>Compra online</span></a></li>
         <li class="ultima"><a href="entradasparagrupos.html"><span>Entradas para grupos</span></a></li>
      </ul>
   </li>
</ul>
</div>
</body>

Código CSS:

Ver original#menu {
  border: none;
  border: 0px;
  margin: 0px;
  padding: 10px;
  font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  width: auto;
}
#menu ul {
  background: #7947ed;
  height: 50px;
  list-style: none;
  margin: 0;
  padding: 0;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  -webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1);
  -moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1);
}
#menu li {
  float: left;
  padding: 0px 0px 0px 15px;
}
#menu li a {
  color: #000;
  display: block;
  font-weight: normal;
  line-height: 50px;
  margin: 0px;
  padding: 0px 25px;
  text-align: center;
  text-decoration: none;
}
#menu li a:hover {
  background: #4512bc;
  color: #FFFFFF;
  text-decoration: none;
  -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
}
#menu ul li:hover a {
  background: #4512bc;
  color: #FFFFFF;
  text-decoration: none;
}
#menu li ul {
  display: none;
  height: auto;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: absolute;
  width: 200px;
  z-index: 200;
}
#menu li:hover ul {
  display: block;
}
#menu li li {
  display: block;
  float: none;
  margin: 0px;
  padding: 0px;
  width: 200px;
  background: #7947ed;
  /*this is where the rounded corners for the dropdown disappears*/
 
}
#menu li:hover li a {
  background: none;
}
#menu li ul a {
  display: block;
  height: 50px;
  font-size: 12px;
  font-style: normal;
  margin: 0px;
  padding: 0px 10px 0px 15px;
  text-align: left;
}
#menu li ul a:hover, #menu li ul li:hover a {
  border: 0px;
  color: #FFFFFF;
  text-decoration: none;
  background: #4512bc;
  -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
}

pzin · #2 (**permalink**) 05/01/2014, 16:20

Con CSS para centrar elementos de bloque se hace:

Código CSS:

Ver originalmargin: 0 auto;

Y si son elementos en linea, aplicar al padre:

Código CSS:

Ver originaltext-align: center;

skreal · #3 (**permalink**) 06/01/2014, 05:32

He probado tu solucion y no cambia nada, gracias de todos modos

pzin · #4 (**permalink**) 06/01/2014, 07:12

¿Y cómo aplicaste lo que dije? Para ver qué hiciste mal.