como hacer que el menu se vea por encima de un slider

Espero me puedan apoyar,

haciendo una pagina sencilla los menus me funcionaban perfecto, pero al implementar un slider el menu se despliega por detras del mismo que puedo hacer?

les dejo el codigo del ccs que uso para la pagina(soy bastante novato en el tema )

article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}
mark, rp, rt, ruby, summary, time {display:inline;}

html{width:100%;}

body { width:100%; background:url(Imagenes/Cassan_bg.gif) 0 0 no-repeat;}

#navegacion{

}
#navegacion li{


}

.nav > li
{
font:Microgramma D OT Bold Extended bolder;
font-size:20px;
list-style:none;
float: right;
background:none;
padding: 0px 1px;
color:white;
font:bolder;
text-decoration:none;
margin-right:120px;
margin-top:10px;
text-align:left;
position:relative;
}

.nav li a
{
padding: 0px 30px;
text-decoration:none;
list-style:none;
background: none;
color:white;
display:block;
position:relative;
}

.nav li a hover
{
padding: 0px 30px;
text-decoration:none;
list-style:none;
background:#444444;
position:inherit;
}

.nav li ul
{
text-decoration:none;
list-style:none;
background:#444444;
display:none;
position:absolute;
}

.nav li:hover > ul
{
text-decoration:none;
list-style:none;
display: block;
position:absolute;
padding-left:1px;
}



.submenu li a
{
color:#000000;
background: #DDDDDD;
text-align:left;
list-style:none;
text-decoration:none;
}


.contenido
{
margin-top:40px;
margin-left:20px;
font:eurostyle bolder;
font-size:16px;
padding:40px;
}


.etiquetas
{
margin-top:50px;
margin-left:20px;
}
.name
{
width:1180px;
}
.correo
{
width:1180px;
}

.mensaje
{
width:1180px;
height:300px;
}
.title
{
padding:0px;
font:eurostyle;
font-size:24px;
color:#FFFFFF;
text-align:left;
}
.textos
{

padding:0px;
font:eurostyle;
font-size:18px;
color: #FFFFFF;
text-align:center;
}

.textos2{
padding:0px;
font:eurostyle;
font-size:18px;
margin-left:20px;
color: #FFFFFF;

}

#slideshow
{
width:918px;
height:546px;
background:none;
border:10px solid #FFF;
-moz-border-radius:15px;
-webkit-border-radius:15px;
overflow-x:scroll;
overflow-y:hidden;
margin:100px auto 50px auto;
box-shadow: 0px 0px 80px #000;
-moz-shadow: 0px 0px 80px #000;
-webkit-shadow: 0px 0px 80px #000;

}

#slidershow ul
{
width:4590px;
list-style:none;
}


#slidershow ul li
{
float:left;
}

#slideshow-nav
{
width:250px;
margin: 0 auto 200px auto;
visibility:hidden;

}

#slideshow-nav ul
{
list-style:none;
}

#slideshow-nav ul li
{
float:left;
}

#slideshow-nav ul li a
{
display:block;
width:30px;
height:30px;
float:left;
margin:0 10px;
background-color:#fff;
text-indent:-9999px;
border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
box-shadow: 0px 0px 30px #000;
-moz-box-shadow: 0px 0px 30px #000;
-webkit-box-shadow: 0px 0px 30px #000;
}

#slideshow-nav ul li a:hover, #slideshows-nav ul li a.active{
background-color:#a89d8a;
}

footer{
margin-top:-100px;
font:Microgramma D OT Bold Extended bolder;
font-size:20px;
color:white;
}


.legal
{
font:Microgramma D OT Bold Extended bold;

float:left;

list-style:none;
text-decoration:none;
margin-left:20px;
color:white;
position:relative;
}
.legal li
{
font:Microgramma D OT Bold Extended bold;

float:left;
list-style:none;
color:white;
text-decoration:none;
}
.legal li a
{
float:left;
font:Microgramma D OT Bold Extended bolder;
font-size:20px;
color:white;
list-style:none;
text-decoration:none;
}

.redessociales
{
float:right;
margin-right:20px;

position:relative;
}
.redessociales li
{
float:right;
list-style:none;
text-decoration:none;
}
.redessociales li a
{
float:right;
list-style:none;
text-decoration:none;
padding:0px;
}

ok no leere todo eso..

para jugar con la profundidad de los elementos y que se muestren delante o detrás de otros, necesitas agregar z-index. La propiedad funciona si tiene asignada position.

Código CSS :

.nav{
   position: relative;
   z-index: 1000;
}

Nacho! gracias solo bastaba la linea del z-index!! muchas gracias !!

ADVERTENCIA:

Un z-index muy alto o muy bajo, podría hacer que el evento "click" no funcione.

lo tomare en cuenta, gracias!

la pagina la subi a http://www.mauriciobriseno.com/pruebacassan/index.html y topdo va bn con lo que me apoyaron , pero en google chrome esta todo bn pero porque los menus en firefox y en explorer se mueven al pasar mouse? se que hay diferencias entre cada navegador pero me gustaria tratar de que se pueda ver lo mas similar posible, o es por el z-index y chrome lo resuelve de una forma y los otros no? le púse z-index:1000px; y ni en chrome ni en safari me da problema, alguna sugerencia

A la sublista le diste posición absoluta, pero te faltó acomodarla.

Código CSS :

.nav li ul {
   left:0px;
   top:60px;
}

gracias, ya quedo al rato la subo saludos!

y como le puedo hacer para que el menu se quede fijo, me refiero a que si hago mas pequeña la ventana, no se desacomode...

asignando un ancho mínimo con min-width

o mejor, usa media queries