Menú desplegable oculto detrás del control deslizante de javascript

Question

Actualmente la parte desplegable de mi menú de navegación se está ocultando detrás del control deslizante de JavaScript que tengo directamente debajo. Vea el problema here. ¿Cómo puedo hacer que aparezca el menú desplegable sobre el control deslizante?

Aquí hay algunos de los CSS para los dos div que contienen el menú de navegación respectivo y el control deslizante.

Nav Menú:

#nav { 
width:1024px; 
height:20px; 
border-bottom:1px solid #ccc; 
} 

deslizante:

#slider { 
width:1024px; 
height:300px; 
background: #353A33; 
padding-bottom:5px; 
} 

¿Alguna idea?

Answer 1

trate de añadir un z-index a su clase .dropdown:

/* Navigation Style */ 
.dropdown { 
    position:relative; 
    font-family: arial, sans-serif; 
    height:50px; 
    width:100%; 
    font-size:14px; 
    color:#ffffff; 
    background:#353A33; 
    z-index:1000; 
} 

Answer 2

uso position: absolute con más alto índice z su nav