Menù a tendina Blog

[Souls]

Sto creando un mio blog e mi sono trovato di fronte a questo problema.
Come posso mettere in 'secondo piano' la png in quanto va a oscurare il menù a tendina. Potreste aiutarmi con il codice HTML/CSS?
http://oi65.tinypic.com/1585qvo.jpg

Questo è il codice:

<html lang="it" xmlns="http://riciclandoblog.blogspot.it">
<head>

<title>Riciclando</title>

<style type="text/css">
body {
background-color: z-index;
font-family: Arial;
}

#menu {
width: left;
margin: centre auto;
}

#menu ul {
padding: 0;
margin: 0;
}

#menu li {
position: relative;
float: left;
width: 140px;
text-align: center;
list-style: none;
}

#menu li a {
background-color: z-index:999;
color: #FFF;
padding: 15px 20px;
text-decoration: none;
display: block;
}

#menu li a:hover {
background-color: #4d4d4d;
text-shadow: 0px 0px 1px #FFF;
}

#menu ul ul {
position: absolute;
top: 48px;
visibility: hidden;
}

#menu ul li:hover ul {
visibility: visible;
}

#menu ul ul:hover {
box-shadow: 0px 20px 30px #7C7C7C;
}

#menu ul ul li a {
background-color: #3A3A3A;
}

#menu ul ul li a:hover {
background-color: #3F3F3F;
}
</style>
</head>
<body>
<div id="menu">
<!-- Lista generale -->
<ul>
<!-- 1° Elemento -->
<li><a href="http://riciclandoblog.blogspot.it/2016/03/riciclando-body-background-color-ccc.html" rel="nofollow" style="text-align: start;">HOME</a></li>
<!-- 2° Elemento: (Sottomenu) -->
<li>
<a href="http://riciclandoblog.blogspot.it/2016/02/riciclando-body-background-color-ccc.html">Rubrica</a>
<ul>
<li><a href="http://riciclandoblog.blogspot.it/2016/02/riciclando-body-background-color-ccc.html">Compostiamo</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=9010470457773427798#"></a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=9010470457773427798#"></a></li>
</ul>
</li>
<li><a href="http://riciclandoblog.blogspot.it/2016/03/contatti.html" rel="nofollow">Contatti</a></li>
</ul>
</div>
</body>

[cenarius_88]

Ciao. Non so se è la scelta migliore, e per mancanza di tempo non la provo io in prima persona ma lascio a te il compito...

puoi assegnare tramite css l'attributo z-index:valore agli elementi secondo la regola per cui un valore maggiore porta l'elemento a stare davanti

HTML

<div id="1">Sono dietro</div>
<div id="2">Sono davanti</div>

CSS

#1{
z-index=1;
}
#2{
z-index=2;
}

Dovrebbe funzionare.
Ah... il valore z-index può assumere valori positivi e negativi ma la regola generale non cambia