Tienes varios problemas con el código, comenzando porque tienes una hoja de estilos, además colocas estilos en el head y otros más inline en el html. Lo recomendado es que trabajes todo el css en una hoja de estilos.
En cuanto a tu problema, tienes que declarar el nivel de la "capa" con la propiedad z-index. Puedes hacerlo así:
Código CSS:
Ver original.navigation
{
position: relative;
z-index: 2 /*o cualquier valor entero alto*/
}
/*o al slide*/
.banner
{
z-index: -1;
}
La lógica detrás de esto, es que entre más alto el valor más se sobrepone a los elementos y viceversa, teniendo en cuenta que también se le debe declarar a los elementos un position diferente al static que es el que tienen por defecto, por eso agregue el position: relative al .navigation.
Por cierto tampoco veo la necesidad de tener un div contenedor .banner y otro más .slide y mucho menos, reitero, aplicar estilos inline en el html, a menos que se apliquen dinamicamente por javascript.
Código HTML:
Ver original<ul style="float:right;list-style-type:none;"> <!--me refiero a esto-->
Espero que tengas razones para ello.