Problema con position:fixed

[xhound]

Hola a todos! tengo un problema con el position:fixed, resulta que hice un menu que estuviera fijo en la ventana al navegar, pero resulta que al agregarle un efecto css3 a las imagenes, estas se ponen encima del menu con atributos fixed, dejo el codigo por si me pueden ayudar, gracias y saludos.

CSS

Código:

	<!--codigo del menu estatico-->
	
#nav{
	font-family: 'Domine', serif;
	font-size:12px;
    height:50px;
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    background:#4f4c4c;
	border-bottom: 1px #CCC solid;
}
#nav ul{
    height:25px;
    list-style:none;
    margin:6px auto 0px auto;
    width:900px;   
}
#nav ul li{
    display:inline;
    float:left;
    margin:0px 2px;
}
#nav a{
    font-size:12px;
    float:left;
    padding: 10px 35px;
    color:#999;
    text-decoration: none;
    cursor: pointer;
    height:16px;
    line-height:16px;
}
#nav a:hover{
    background:#D9D9DA none;
    color: #fff;
}
#nav a.top span, #nav a.bottom span{
    float:left;
    width:16px;
    height:316px;
}

<!--codigo de los efectos en las imagenes-->

ul.efectos {
position:relative;
margin:0;
padding:0
}
ul.efectos li {
background:#F00;
position:relative;
list-style:none;
width:226px;
height:160px;
overflow:hidden;
float:left;
margin:20px 20px 0px 10px;
padding:0
}

ul.efectos li:hover img {
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-ms-transform:scale(1.2);
-o-transform:scale(1.2);
opacity:0.2;
}

ul.efectos li img {
z-index:30;
position:absolute;
top:0;
left:0;
-webkit-transition:all .9s ease-out;
-moz-transition:all .9s ease-out;
-ms-transition:all .9s ease-out;
-o-transition:all .9s ease-out
}

ul.efectos li h2 {
font-size:18px;
font-family: 'Domine', serif;
color:#fff;
line-height:1.0em;
letter-spacing:0.2em;
text-align:center;
text-transform:uppercase;
-webkit-transition:all .5s ease-in;
-webkit-transform:scale(0.1);
-moz-transition:all .5s ease-in;
-moz-transform:scale(0.1);
-ms-transition:all .5s ease-in;
-ms-transform:scale(0.1);
-o-transition:all .5s ease-in;
-o-transform:scale(0.1);
opacity:0;
margin:0;
}

ul.efectos li:hover h2 {
padding-top:45px;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
opacity:1
}

ul.efectos li a.boton {
display:block;
text-align:center;
font-family: 'Oswald', sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
text-decoration:none;
font-size:10px;
background:#333;
color:#fff;
width:140px;
margin-left:40px;
border:none;
-webkit-transition:all .6s ease-in;
-webkit-transform:translateY(230px) scale(5);
-moz-transition:all .6s ease-in;
-moz-transform:translateY(230px) scale(5);
-ms-transition:all .6s ease-in;
-ms-transform:translateY(230px) scale(5);
-o-transition:all .6s ease-in;
-o-transform:translateY(230px) scale(5);
opacity:0;
cursor:pointer;
z-index:50;
padding:10px
}
ul.efectos li:hover a.boton {
-webkit-transform:translateY(0) scale(1);
-moz-transform:translateY(0) scale(1);
-ms-transform:translateY(0) scale(1);
-o-transform:translateY(0) scale(1);
opacity:1
}

HTML

Código:

<!-- codigo del menu estatico-->
<div id="nav">
<div class="logo"><img src="img/logo.png" alt="" width="166" height="128" /></div>
<ul>
    <A href="#">Inicio</A>
    <A href="#quien_soy">¿Quien soy?</A>
    <A href="#portafolio">Portafolio</A>
    <A href="#servicios">Servicios</A>
    <A href="#contacto">Contacto</A>
				</li>
            </ul>
</div>
<!-----codigo de las imagenes con efecto---->

<ul class="efectos">
        <li>
          <a href="deftones.html"><img src="img/trabajo_2.jpg" alt="" width="226" height="160" /></a>
          <h2>Motion Comic "Metal Gear"</h2><br />
          <div class="categoria">Diseño Editorial / Folletos </div>
          <a class="boton" href="#" title="Haz click aquí para más información">Mas Info</a>
        </li>
</ul>