Code CSS

Bonjour à tous,

Je viens vers vous car j'ai un petit problème. Je fais un site internet à l'aide de joomla (www.judo-saintsebastien.fr).
Sur la page d'accueil de mon site, j'ai inséré un composant (frontpage slideshow) qui se situe juste en dessous de ma barre de menu. Mon problème est que mes menus déroulant passent sous le module.

Après de nombreuse recherche sur internet, j'ai trouvé qu'il fallait que j'insère au niveau des codes CSS la fonction z-index, pour soit mettre module à l'arrière plan, soit mettre mon menu au premier plan. Le problème, c'est que n'y connaissant rien en code CSS, je dois pas le faire correctement et ça ne marche pas...

Dans le dossier CSS de ma template, j'ai trouvé le fichier extension.css, dans ce fichier il y a une partie sur l'extension frontpage slideshow en question. Pourriez-vous m'indiquer ce que je dois rajouter et où je dois le rajouter pour que mon module passe à l'arrière plan? (copie du code ci-dessous)

**********************************************************************************
/* Slideshow */
.wk-slideshow-default .nav {
position: absolute;
z-index: 9;
bottom: 20px;
right: 30px;
height: 24px;
padding: 4px 8px 0 8px;
border: 1px solid rgba(0,0,0,0.25);
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
background: rgba(0,0,0,0.4);
-moz-box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
}

.wk-slideshow-default .nav span:hover { background-position: 0 -40px; }
.wk-slideshow-default .nav span:active { background-position: 0 -120px; }
.wk-slideshow-default .nav .active span { background-position: 0 -80px; }

.wk-slideshow-default > div:hover .next,
.wk-slideshow-default > div:hover .prev {
background-image: url(../images/widgetkit/buttons.png);
background-repeat: no-repeat;
}

.wk-slideshow-default > div:hover .next { background-position: 0 0; }
.wk-slideshow-default > div:hover .next:hover { background-position: 0 -70px; }
.wk-slideshow-default > div:hover .next:active { background-position: 0 -140px; }

.wk-slideshow-default > div:hover .prev { background-position: 0 -210px; }
.wk-slideshow-default > div:hover .prev:hover { background-position: 0 -280px; }
.wk-slideshow-default > div:hover .prev:active { background-position: 0 -350px; }

.wk-slideshow .slides {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0 0 6px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 6px rgba(0,0,0,0.5);
box-shadow: 0 0 6px rgba(0,0,0,0.5);
}

**********************************************************************************

Merci d'avance pour vos réponses, parce que là vraiment je sèche...

PS : J'ai déjà essayé de changer le "z-index:9" présent dans le code par "z-index:-1000" mais ça n'a rien changé à mon problème...