¿Cómo puedo añadir una imagen de fondo a un menú desplegable?

[matheus_rostenkowski]

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.