Menu bị chìm dưới slide ảnh

Chào mọi người!
Mình đang nghiên cứu để viết trang website cho cơ sở của mình.
Tuy nhiên, khi mình click vào cái menu động có cái đoạn mã css mình tải trên mạng về thì submenu nó hiện ra dưới mấy tấm hình slide của mình.
Mình muốn cái submenu hiện lên trên mấy tấm hình slide.
Mọi người vui lòng giúp mình khắc phục vấn đề trên.
Mình có hình đính kèm
Không luu được hình các bạn ạh
mediafire.com/view/t0yz1safxvpw9eg/SubMenuDuoiSlide.JPG

đây là đoạn code CSS mình copy trên mạng về và đưa vào menu của mình.
body {
background:#eee;
margin:0;
padding:0;
}
.example {
width:770px;
height:570px;
margin:20px auto;
padding:15px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

/* main menu styles */
#nav {
border-style: none;
border-color: inherit;
border-width: 10px;
display:inline-block;
width:150px;
margin:0px auto;
padding:0px;
background:#CA95FF;

/*some css3*/
box-shadow:0 2px 2px rgba(0,0,0, .5);
box-shadow:0 2px 2px rgba(0,0,0, .5);
box-shadow:0 2px 2px rgba(0,0,0, .5);
color: #fbfbfb;
}
#nav li {
margin:1px;
float:none;
position:relative;
list-style:none;
}
#nav a {
font-weight:bold;
color:#fbfbfb;
text-decoration:none;
display:block;
padding:5px 10px 5px 10px;

border:10px; /*some css3*/
border:10px;
border:10px;
text-shadow:0 2px 2px rgba(0,0,0, .7);
}

/* selected menu element */
/* chinh mau chon doi tuong, mau chu menu chinh*/
#nav .current a, #nav li:hover > a {
background:#FFD8B0;
color:#fbfbfb;
border-top:1px solid #f8f8f8;

box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
box-shadow:0 2px 2px rgba(0,0,0, .7);
box-shadow:0 2px 2px rgba(0,0,0, .7);
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
left:100px;
}

/* sublevels */
/* chinh mau chon doi tuong, mau chu menu con*/
#nav ul li:hover a, #nav li:hover li a {
background:#FFD8B0;
border:none;
color:#000;

}
#nav ul li a:hover {
background:#FFD8B0;
color:#fff;

border:10px; /*some css3*/
border:10px;
border:10px;
text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}

#nav ul li:first-child > a {
border-topleft:10px; /*some css3*/
border-topright:10px;
border-top-left:10px;
border-top-right:10px;

}
#nav ul li:last-child > a {
border-bottomleft:10px; /*some css3*/
border-bottomright:10px;
border-bottom-left:10px;
border-bottom-right:10px;

}

/* drop down */
#nav li:hover > ul {
opacity:1;
visibilityisible;
left:120px;
top:0px;
}
/* mau nen menu con */
#nav ul {
opacity:0;
visibility:hidden;
padding:0;
width:175px;
position:absolute;
background:#FFD8B0;
border:1px solid #7788aa;

border:10px; /*some css3*/
border:10px;
border:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
box-shadow:0 2px 2px rgba(0,0,0, .5);
box-shadow:0 2px 2px rgba(0,0,0, .5);

transitionpacity .25s linear, visibility .1s linear .1s;
transitionpacity .25s linear, visibility .1s linear .1s;
transitionpacity .25s linear, visibility .1s linear .1s;
transitionpacity .25s linear, visibility .1s linear .1s;
}
#nav ul li {
float:none;
margin:0;
}
#nav ul a {
font-weight:normal;
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#nav ul ul {
left:160px;
top:0px;
}

Bạn thêm z-index: 9999; thử coi

Cảm ơn bạn, menu đã hiện trên hình. Xin chân thành cảm ơn vì sự giúp đỡ.