[RESOLVED] drop down menu sub items under slider show ...how to fix it

[nkkin]

how can get my drop down menu sub items shown over the slider
the problem is shown in the image added

menu html

<ul id="menu">
<li class="vous"><a href="#">Acceuil</a></li>
<li class="nous"><a href="#">Votre Secteur</a></li>
<li class="actus"><a href="#" class="selected">Nos expertises</a></li>
<li class="actux"><a href="#" class="selected">Actualités</a>
<ul class="sub-menu">
<li>
<a href="#">Sub Menu 1</a>
</li>
<li>
<a href="#">Sub Menu 2</a>
</li>
<li>
<a href="#">Sub Menu 3</a>
</li>
<li>
<a href="#">Sub Menu 4</a>
</li>
</ul>
</li>
<li class="liens"><a href="#" class="selected">Liens Utiles</a></li>
<li class="contact"><a href="#" >Contactez-nous</a></li>
<li class="social facebook"><a href="https://www.facebook.com" target="_blank">facebook</a></li>
</ul>
</div>

menu css

#menu{ width:1030px;
height:38px; background:#94481f;}

#menu li{ display: inline ; }
#menu li a{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight:bold;
display:block;
float: left;
padding:0 15px;
line-height:28px;
text-align:center;
text-transform:uppercase;
font-size:1.02em;
color:#fff;
letter-spacing:0.08em;
background: #f26335;
width: 120px;
}

#menu li a:hover{ color:#322661; }
#menu li.actus a{ color:#322661; background:#FF9900;width:130px;}
#menu li.actus a:hover{ color:#fff; }
#menu li.vous a{ background:#961f5f; color:#322661; }
#menu li.nous a{ background:#00a4c4; color:#322661; }
#menu li.actux a{ background:#ed3386; color:#322661; }
#menu li.liens a{ background:#a468a1; color:#322661; }
#menu li.contact a{ background:#94481f; color:#322661; }
#menu li.vous a:hover, #menu li.nous a:hover, #menu li.actux a:hover, #menu li.liens a:hover, #menu li.contact a:hover{ color:#fff; }
#menu li.social a:hover{color:#322661;}
#menu li.social a{
color:#fff;
float:right;
text-transform:lowercase;
letter-spacing:0em;
font-size:1.1em;
font-weight:normal;
padding:0 10px 6px 80px;
margin-right:10px;
background:url(../img/social.png) no-repeat 90px 0;
}

#menu li.viadeo a{ background-position:0 -62px; }
#menu li.google a{ background-position:0 -31px; }
#menu li.facebook a{ margin:0; }

ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
color:#6c58bc;
background: #f47af0;
padding: 5px;
display: inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
width: 100px;
}
ul#menu li:hover ul.sub-menu {
display:block;
}

slider css

#wrapper-slider{
width:100%;
height:215px;
text-align:left;
background:url(../img/accueil.jpg) repeat-y center 0 #00a4c4;
margin:0 0 20px 0;
}

body.actualite #wrapper-slider{ background-color:#961f5f; }

#slider{
width:980px;
height:215px;
margin:0 auto;
}

.slide{
border:1px solid #e2e2e2;
width:719px;
height:213px;
float:left;
position:relative;
overflow:hidden;
}

.slide a{
position:absolute;
top:50%;
left:12px;
margin:-15px 0 0 0;
width:28px;
height:28px;
display:block;
background:url(../img/nav.png) no-repeat 0 0;
}
.slide a.next{ background-position:-28px 0; left:auto; right:12px; }
.slide a:hover{ background-position:0 -28px; }
.slide a.next:hover{ background-position:-28px -28px; }

.slide ul li{ display:block; float:left; }

#slider p a{
display:block;
float:left;
width:248px;
height:33px;
margin:0 0 4px 4px;
padding:36px 0 0 7px;
color:#fff;
}

#slider p a:hover{ background-position:-255px 0; }
#slider p a.service{ color:#ed3386; }
#slider p a.devis{ background-position:0 -69px; }
#slider p a.bureau{ background-position:0 -138px; padding-top:47px; height:22px; }
#slider p a.devis:hover{ background-position:-255px -69px; }
#slider p a.bureau:hover{ background-position:-255px -138px; }

/* ===== FIN SLIDER ===== */

thank you