Z-Index ?

Fala galera, estou desenvolvendo um site, e hoje me deparei com esse problema, a imagem do carrossel/SlideShow está ficando por cima do header, mesmo com o Z-index, podem me ajudar? 

HTML:

<section id='head'>
            <nav>
                <ul>
                    <li><a class='.transition' href="#">Sobre</a></li>
                    <li><a class='.transition' href="#">Portifólio</a></li>
                    <li><a class='.transition' href="/"><img src="img/logo.png"></a></li>
                    <li><a class='.transition' href="#">Contato</a></li>
                    <li><a class='.transition' href="#">Orçamento</a></li>
                </ul>
            </nav>
        </section>
        <section id='slides'>
            <section id='images'>
                <img src="img/slide/slides/1.jpg">
            </section>
        </section>

CSS:

#head{
    float: left;
    width:100%;
    height:100px;
    background: url(../img/background.png);
    border-bottom: 3px solid  rgb(132, 13, 13);
    z-index: 1;
}
#head nav{
    width: 1020px;
    height: 100px;
}
#head nav ul li img{
    float: right;
    width: auto;
    height: 100px;
    background:url(../img/background.png);
    border:3px solid  rgb(132, 13, 13);
    border-top: none;
    margin-top: 55px;
}
/*Slides*/
#slides{
    float: left;
    width: 100%;
    height: 500px;
    background: url(../img/slide/background.png) repeat;
}
#slides img{
    width: auto;
    height: 500px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index:0;
} 

imagem: