Posicionar Menu na frente de um Slider

Boa noite Pessoal,

Comecei a desenvolver em HTml5 a pouco tempo e estou tentando criar um site para um cliente.

Criei um site institucional, onde possui MenuDropDown horizontal e em baixo um slide com fotos e descrição das mesmas.

Só que quando se passa o mouse no item do menu que desce, ao inves de eparecer na frente do slide, ele aparece atrás.

Já tentei colocar z-index em tudo quanto foi canto, sem êxito.

O codigo é o seguinte:

HTML

<header>
 <div class="logo">
 <h1><a href="">INEDIT<i>T</i>A</a></h1>
 <span class="description">Consultoria Sindical e Trabalhista</span> </div>
 <a href="#" class="rss">RSS Submit</a>
 <nav>
 <ul>
 <li><a href="index.php" <?php if($paginaCorrente == 'index.php') {echo 'class="current"';} ?>>Principal</a></li>
 <li><a href="quemsomos.php" <?php if($paginaCorrente == 'quemsomos.php') {echo 'class="current"';} ?>>Quem Somos</a></li>
 <li><a href="servicos.php" <?php if($paginaCorrente == 'servicos.php') {echo 'class="current"';} ?>>Serviços</a>
 <ul>
 <li><a href="index.php">Assinatura</a></li>
 <li><a href="index.php">Auditoria</a></li>
 <li><a href="index.php">Consultoria</a></li>
 <li><a href="index.php">Terceirização</a></li>
 <li><a href="index.php">Treinamento</a></li>
 </ul>
 </li>

 <li><a href="parceiros.php" <?php if($paginaCorrente == 'parceiros.php') {echo 'class="current"';} ?>>Parceiros</a></li>
 <li><a href="clientes.php" <?php if($paginaCorrente == 'clientes.php') {echo 'class="current"';} ?>>Clientes</a></li>
 <li><a href="faleconosco.php" <?php if($paginaCorrente == 'faleconosco.php') {echo 'class="current"';} ?>>Fale Conosco</a></li>
 </ul>
 </nav>

 </header>

<section id="main-banner">
 <div class="intro" >

 <div class="redes_sociais"><a href="LINKFACEBOOK" target="_blank"><img src="images/facebook.png" height="35" width="35"></a><a href="LINKHI5" target="_blank"><img src="images/flickr.png" height="35" width="35"></a><a href="LINKTWITTER" target="_blank"><img src="images/twitter.png" height="35" width="35"></a><a href="LINKYOUTUBE" target="_blank"><img src="images/youtube.png" height="35" width="35"></a><a href="LINKYOUTUBE" target="_blank"><img src="images/orkut.png" height="35" width="35"></a></div>
 <div class="container_12">
 <div class="wrapper">
 <aside class="grid_4">
 <div class="box">
 <h2>Área do Assinante</h2>

 <form action="" id="login-form">
 <fieldset><label for="login: " class="fleft">Login :</label> <input type="text" class="fright" name="login" id="login"></fieldset>
 <fieldset><label for="senha: " class="fleft">Senha :</label> <input type="text" class="fright" name="senha" id="senha"></fieldset>
 <br/>
 Esqueci minha senha<input type="submit" class="fright" value="OK">
 </form>
 </div>
 </aside>
 </div>
</div>

 </div>
 <div class="anythingSlider">
 <div class="wrapper">
 <ul>
 <li><img src="images/slide1.png" alt=""></li>
 <li><img src="images/slide2.png" alt=""></li>
 <li><img src="images/slide3.png" alt=""></li>
 <li><img src="images/slide4.png" alt=""></li>
 <li><img src="images/slide5.png" alt=""></li>
 </ul>
 </div>
 </div>
 </section>

CSS:

#main {
margin: 0 auto;
position: relative;
width: 961px;
font-size:.75em;
}

/ Header /
header{

	height:162px;
	overflow:hidden;
	position:relative;

	}

/ Content /
section#content {

	background:url(../images/content-tail.gif) 0 0 repeat-x #fff;
	padding:15px 0 44px 0;
	position:relative;
	border-radius:7px;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	behavior:url(js/PIE.htc);

	}

/ Sidebar /
aside.top{

	background:url(../images/aside-bg.gif) 0 0 repeat-x #b9b9b9;
	padding:0 20px 0 20px;
	font:12px/18px Arial, Helvetica, sans-serif;
	color:#484848;
	position:relative;
	border-radius:7px;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	behavior:url(js/PIE.htc);
	margin-bottom:1px;
	}
	aside.top .inner {
 padding:11px 15px 37px 0;
 }
	.divider {
 background:url(../images/divider.gif) 100% 0 no-repeat;
 }

	aside.left {
 float:left;
 }

header nav {

position:relative;
left:0;

/top:118px;/

top:80px;

}

header nav li {

	float:left;
	}
	header nav li a {
 float:left;
 width:161px;
 height:44px;
 line-height:44px;
 text-align:center;
 background:url(../images/nav-bg.png) no-repeat 0 0;
 color:#fff;
 text-shadow:1px 1px 0 #11182c;
 font-size:15px;
 font-weight:bold;
 text-decoration:none;
 margin-right:-1px;
 }

 header nav li ul li {
 clear:both;
 }

 header nav li ul a {
 position:relative;
 float:left;
 width:161px;
 height:30px;
 line-height:30px;
 text-align:center;
 background:url(../images/nav-bg.png) no-repeat 0 0;
 color:#fff;
 text-shadow:1px 1px 0 #11182c;
 font-size:15px;
 text-decoration:none;
 margin-right:-1px;
 display:none;
 z-index:10;
 }

	header nav li a:hover,
	header nav li a.current {
 background:url(../images/nav-bg-act.png) no-repeat 0 0;
 text-shadow:1px 1px 0 #f1b955;
 color:#27324d;

 }

	header nav li ul a:hover,
	header nav li ul a.current {
 background:url(../images/nav-bg-act.png) no-repeat 0 0;
 text-shadow:1px 1px 0 #f1b955;
 color:#27324d;
 }

	header nav li .current {
 cursor:default;
	}

	header nav li:hover ul a	{
 display:block;

	}

/* Main Banner
---------------------------------------- */

#main-banner {
position:relative;
height:303px;
margin-bottom:1px;
width:961px;
overflow:hidden;

}

/ Intro /
.intro {
/background:url(../images/intro.jpg) no-repeat 0 0;/

background:url(../images/login_bg.jpg) repeat-x 0 0 #FFFFFF;
width:321px;
height:303px;
position:absolute;
left:0;
top:0;
color:#000066;

/text-shadow:3px 3px 0 #ffffff;/
}

.intro .efeito1 {

position:absolute;
left: 2px;
top: -2px;
color:#fff;
padding:105px 30px 0 30px;
}

.intro strong {

	display:block;
	font-size:33px;
	line-height:1em;
	font-style:italic;
	font-weight:normal;
	text-transform:uppercase;
	}

.intro span {

	display:block;
	font-size:27px;
	line-height:1em;
	font-style:italic;
	text-transform:uppercase;
	float:right;
	padding-top:3px;
	}

.intro .inner {

	padding:105px 30px 0 30px;
	}

/ Anythin Slider /
.anythingSlider { width: 640px; height: 303px; position: relative; float:right;z-index:1}
.anythingSlider .wrapper { width: 640px; overflow: auto; height: 303px; position: absolute; top: 0; left: 0; }
.anythingSlider .wrapper ul { width: 9999px; list-style: none; position: absolute; top: 0; left: 0; margin: 0; }
.anythingSlider ul li { display: block; float: left; padding: 0; height: 317px; width: 680px; margin: 0; }
.anythingSlider .arrow { display: block; height: 200px; width: 67px; background: url(../images/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: 65px; cursor: pointer; }
.anythingSlider .forward { background-position: 0 0; right: -20px; }
.anythingSlider .back { background-position: -67px 0; left: -20px; }
.anythingSlider .forward:hover { background-position: 0 -200px; }
.anythingSlider .back:hover { background-position: -67px -200px; }

#thumbNav { position: relative; top: 264px; text-align: center; background:url(../images/anything-nav-bg.png) no-repeat 0 0; padding:8px 7px 8px 0; text-align:right; margin-left:2px;}
#thumbNav a {

font: 13px/18px Arial, Helvetica, sans-serif;
display: inline-block;
text-decoration: none;
padding: 0 7px;
height: 18px;
margin: 0 4px 0 0;
background-image: url(../images/cell-tail.gif);
background-repeat: repeat-x;
border:1px solid #000;
text-align: center;
outline: 0;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
text-shadow:1px 1px 0 #f1f1f1;
color:#000;
}

#thumbNav a:hover { background: #eee; }
#thumbNav a.cur { background: #e0a213; }

#start-stop {
position:absolute;
left:7px;
bottom:11px;
font: 13px/18px Arial, Helvetica, sans-serif;
display: inline-block;
text-decoration: none;
width:44px;
padding: 0 7px;
height: 18px;
margin: 0 4px 0 0;
background-image: url(../images/cell-tail.gif);
background-repeat: repeat-x;
border:1px solid #000;
text-align: center;
outline: 0;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
text-shadow:1px 1px 0 #f1f1f1;
color:#000;
}

Surgiram algumas dúvidas: Será que o z-index funciona no html5?

Se alguém puder ajudar ficarei muito agradecido?