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ó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ó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ó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);
}