[Résolu] Menu déroulant : Problèmes avec CSS

Bonjour,

j'essaye depuis mon site en développement de créer un menu déroulant qui passe au premier plan devant le texte (sans le déplacer).
j'ai un code css pour mon menu, j'ai entendu parlé de la fonction z-index mais je ne comprends pas comment faire. Si vous avez une idée je prends avec plaisir !

Voici le code HMTL :

<ul id="menu-accordeon">
	<li id="menu-haut"><a href="#"><img id="img_menu" src="img/menu.png"></a>
		<ul>
			<li><a href="#">Caméras</a></li>
			<li><a href="#">Masse</a></li>
			<li><a href="#">Temperature</a></li>
			<li><a href="#">Humidité</a></li>
			<li><a href="#">Lumière</a></li>
			<li><a href="#">Connexion</a></li>
			<li><a href="#">Autonomie</a></li>
			<li><a href="#">A propos</a></li>
		</ul>
	</li>
</ul>

et le code CSS :

#menu-accordeon {
	background-color: rgb(0,0,0,0.5);

	padding:0;
	margin:0;

	list-style:none;
	text-align: center;
	width: 180px;
}
#menu-accordeon ul {
	padding:0;
	margin:0;

	list-style:none;
	text-align: inherit;
}
#menu-accordeon li {
	margin-bottom:2px;
}
#menu-accordeon li li {
	max-height:0;
	overflow: hidden;
	transition: all 0.25s;
	border-radius:0;
	box-shadow: none;
	border:none;
	margin:0
}
#menu-accordeon a {
	display:block;
	text-decoration: none;
	color: #fff;
	padding: 8px 0;
	font-size:1.2em;
}
#menu-accordeon ul li a, #menu-accordeon li:hover li a {
	font-size:1em;
}
#menu-accordeon li:hover {
	background-color: rgb(0,0,0,0.9);
}
#menu-accordeon li li:hover {
	background:rgb(0,0,0,0);;
}
#menu-accordeon ul li:last-child {
	border:none;
}
#menu-accordeon li:hover li {
	max-height: 15em;
}

#img_menu{
	width: 2.1em;
	height: auto;
}