Muy buenas a todos!
Estoy creando una web y durante el desarrollo de un menú desplegable con css me he encontrado con un par de problemillas. El primero, y como describo en el título es que la imagen de fondo no se me muestra en el menú; ¿Cómo podría solucionarlo?
Y la segunda de ellas, es que por algún motivo, la "sublista" (el contenido desplegable) no se me muestra centrada bajo el botón padre. ¿Cómo lo corrijo?
Este es mi código:
HTML
<nav>
<ul class="menu">
<li class="sup"><a href="#">NOVAS</a></li>
<li class="sup"><a href="#">A BANDA</a></li>
<li class="sup"><a href="#">DISCOGRAFÍA</a>
<ul>
<li><a href="#">Skakeo (2010)</a></li>
<li><a href="#">Torsión Mundial (2012)</a></li>
<li><a href="#">Etche Überse</a></li>
<li><a href="#">Pinapromo 2013</a></li>
</ul>
</li>
<li class="sup"><a href="#">MULTIMEDIA</a>
<ul>
<li><a href="#">Prensa</a></li>
<li><a href="#">Podcast</a></li>
<li><a href="#">Vídeos</a></li>
</ul>
</li>
<li class="sup"><a href="#">TOUR 2014</a></li>
<li class="sup"><a href="#">CONTACTO</a></li>
</ul>
</nav>
CSS
nav{
margin:auto;
width:940px;
font-family:'Roboto Condensed', sans-serif;
font-size:27px;
font-weight:600;
background-image:url(../images/nav_back.png);
}
ul, ol{
list-style:none;}
.sup{
margin-bottom:20px;
margin-right:0px;
}
.menu li a{
color:#FFF;
text-decoration:none;
padding:10px 15px;
display:block;}
.menu li a:hover{
color:#999;}
.menu li ul{
display:none;
position:absolute;
min-width:100px;}
.menu li:hover > ul{
padding-top:5px;
font-weight:100;
font-size:15px;
display:block;
}
.menu li ul li{
position:relative;}
.menu > li{
float:left;}
Muchas gracias de antemano.
