[html-css] sottomenu nascosto sotto slider

[mistergks]

ho un menu a tendina verticale...
lo slider di immagini mi nasconde il sottomenu.
So che è un problema di position e z-index.. ma non riesco a trovare la giusta configurazione.
Cambiando le position il menu sparisce del tutto oppure cambia posizione e va a finire dove non dovrebbe stare.
Cosa posso fare?

questo è l'html:



<div class="main">

<center> <a href="index.html"><img src="images/logo.png" alt="motormania"></a> </center>
<nav>
<div id="menu"><!-- div che contiene il menu -->
<ul> <!-- lista principale: definisce il menu nella sua interezza -->

<li><a href="index.html">HOME</a></li>

<li>
<a href="#">ABBIGLIAMENTO</a> <!-- primo list-item, prima voce del menu -->
<ul> <!-- Lista annidata: voci del sotto-menu -->
<li><a href="caschiintegrali.html">CASCHI INTEGRALI</a></li>
<li><a href="caschijet.html">CASCHI JET</a></li>
<li><a href="giubbotti.html">GIUBBOTTI</a></li>
<li><a href="guanti.html">GUANTI</a></li>
<li><a href="stivali.html">STIVALI</a></li>
</ul> <!-- Fine del sotto-menu -->
</li> <!-- Chiudo il list-item -->

<li style="left: 0px; top: 0px"><a href="accessori.html">ACCESSORI</a></li>

<li><a href="usate.html">MOTO USATE</a></li>

<li>
<a href="#">USCITE</a> <!-- primo list-item, prima voce del menu -->
<ul> <!-- Lista annidata: voci del sotto-menu -->
<li><a href="fotouscite.html">FOTO</a></li>
<li><a href="videouscite.html">VIDEO</a></li>
</ul> <!-- Fine del sotto-menu -->
</li> <!-- Chiudo il list-item -->




<li><a href="gallery.html">GALLERY</a></li>

<li><a href="contatti.html">CONTATTI</a></li>



</nav>
</div>


<!--=======content================================-->
<div class="main"
<div id="immersive_slider">
<div class="slide" data-blurred="images/logo.png">
<div class="content">
<p> MOTORMANIA LANZILLOTTA vi dà il benvenuto!</p>
</div>
<div class="image">
<img src="img/slide1.jpg" alt="Slider 1">
</div>
</div>
<div class="slide" data-blurred="images/logo.png">
<div class="content">
<p></p>
</div>
<div class="image">
<img src="img/slide2.jpg" alt="Slider 1">
</div>
</div>
<div class="slide" data-blurred="images/logo.png">
<div class="content">
<p>Per qualsiasi cosa non esitate a contattarci! Siamo a vostra completa disposizione...</p>
</div>
<div class="image">
<img src="img/slide3.jpg" alt="Slider 1">
</div>
</div>
<div class="slide" data-blurred="images/logo.png">
<div class="content">
<p></p>
</div>
<div class="image">
<img src="img/slide4.jpg" alt="Slider 1">
</div>
</div>



<a href="#" class="is-prev">&laquo;</a>
<a href="#" class="is-next">&raquo;</a>
</div>
<script type="text/javascript">
$(document).ready( function() {
$("#immersive_slider").immersive_slider({
container: ".main"
});
});


</script>
</div>
<script>


var _gaq=[['_setAccount','UA-11278966-1'],['_trackPageview']]; // Change UA-XXXXX-X to be your site's ID
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>







e questo il css del menu:

#menu {
width: 980px;
margin: 0 auto;
position: absolute;


}

#menu ul {
padding: 0;
margin: 0;
position: relative;
z-index: 1000000;
}

#menu li {
position: relative;
float: left;
list-style: none;
margin: 0;
padding: 0 0px;
z-index: 9999;


-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
}

#menu li a {
width: 112px;
line-height: 40px;
padding: 5px 13px;
display: block;
text-decoration: none;
text-align: center;
background-color: #007BA7;
color: white;
z-index: 9999;

}

#home { background: no-repeat no-repeat 10px 7px; }
#feed { background: no-repeat no-repeat 10px 7px; }
#sezioni { background: no-repeat 10px 7px; }


#home:hover {
border-top: 3px solid #32CD32;
}

#feed:hover {
border-top: 3px solid #FFA500;
}

#sezioni:hover {
border-top: 3px solid #FFFF00;
}

#menu li a:hover{
text-shadow: 0px 0px 1px #FFF;
background-color: #08E8DE;
}

#menu ul li:hover {
transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1); /* IE 9 */
-webkit-transform: scale(1.1, 1.1); /* Safari and Chrome */
}

#menu ul li ul li:first-child {
margin-top: 3px;
}

#menu ul li ul li:last-child:after, ul li ul li:last-child:before {
display: none;
}

#menu ul ul {
position: absolute;
top: 50px;
right: -1px;
visibility: hidden;
z-index: 9999;


}

#menu ul li:hover ul{
visibility: visible;
z-index: 9999;
position: absolute;


}

#menu ul li ul li:before {
content: "";
border-color: transparent #000000 transparent transparent;
border-style: solid;
border-width: 13px;
height: 0px;
width: 0px;
position: absolute;
left: -8px;
top: 38px;
z-index: 9999;
}

#menu ul li ul li:after {
content: "";
border-color: transparent transparent transparent #000000;
border-style: solid;
border-width: 13px;
height: 0px;
width: 0px;
position: absolute;
right: -8px;
top: 38px;
z-index: 9999;
}



questo invece il css dello slider:

/*=================================================
Class Definitions
=================================================*/


.immersive_slider {
background: #161923;
max-width: 100%;
height: 480px;
opacity: .9;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
position: relative;
overflow: hidden;
}
.immersive_slider .is-slide {
display: table;
height: 100%;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 50px 100px;
position: absolute;
}
.immersive_slider .is-slide .image {
float: none;
width: 50%;
padding-left: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
vertical-align: middle;
display: table-cell;
padding: 0 0 0 10px;
}
.is-bg-overflow {
width: 100%;
height: 100%;
position: absolute;
}


.is-overflow, .is-bg-overflow {
height: 100%;
}


.ease {
-webkit-transition: 1000ms ease all;
-moz-transition: 1000ms ease all;
-o-transition: 1000ms ease all;
transition: 1000ms ease all;
}


.bounce {
-webkit-transition: 1000ms cubic-bezier(0.175, 0.885, 0.420, 1.310) all;
-moz-transition: 1000ms cubic-bezier(0.175, 0.885, 0.420, 1.310) all;
-o-transition: 1000ms cubic-bezier(0.175, 0.885, 0.420, 1.310) all;
transition: 1000ms cubic-bezier(0.175, 0.885, 0.420, 1.310) all;
}


.no-animation {
-webkit-transition: none!important;
-moz-transition: none!important;
-o-transition: none!important;
transition: none !important;
}


.immersive_slider .is-slide .image img{
max-width: 100%;
display: block;
width: 100%;
}


.immersive_slider .is-slide .content {
float: none;
width: 20%;
padding-right: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
color: white;
text-align: left;
line-height: 160%;
vertical-align: middle;
display: table-cell;
}


.immersive_slider .is-slide .content h2{
font-size: 42px;
font-weight: 300;
text-align: left;
}


.is-container {
position: relative;
overflow: hidden;
}


.is-container .is-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


.is-container .is-background img{
width: 100%;
height: 100%;
left: 0;
position: relative;
}


.is-container .is-background.gs_cssblur {
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-o-filter: blur(20px);
filter: blur(20px);
}


.is-pagination {
position: absolute;
left: 0;
width: 100%;
bottom: 20px;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.is-pagination li {
padding: 0;
display: inline-block;
text-align: center;
position: relative;
}
.is-pagination li a{
padding: 10px;
width: 4px;
height: 4px;
display: block;

}
.is-pagination li a:before{
content: '';
position: absolute;
width: 4px;
height: 4px;
background: rgba(255,255,255,0.85);
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}


.is-pagination li a.active:before{
width: 10px;
height: 10px;
background: none;
border: 1px solid white;
margin-top: -4px;
left: 8px;
}


.is-next, .is-prev {
padding: 5px 5px 15px;
font-size: 50px;
position: absolute;
bottom: 50%;
margin-bottom: -36px;
width: 35px;
color: #FFF;
display: inline-block;
line-height: 100%;
background: rgba(0, 0, 0, 0.35);
}


.is-next {
right: 10px;
}


.is-prev {
left: 10px;
}

[mistergks]

Up

[Daniels118]

Carica tutti i file su un web server oppure crea un fiddle così è più facile aiutarti.

Ad ogni modo, tieni presente le seguenti regole:
1) z-index funziona solo se specifichi position;
2) un elemento che ha position absolute assume una posizione relativa al primo elemento superiore che ha una position; ciò significa che se assegni position absolute ad li senza specificare position su ul, li finirà nell'angolo della pagina;
3) se la memoria non mi inganna, z-index è sempre locale al primo elemento superiore che ha position; ciò significa che se ul ha position relative ma sta sotto allo slider, anche mettendo position absolute e z-index 999999 su li, lo slider gli starà sempre davanti. Bisogna quindi specificare z-index su ul o altri contenitori superiori posizionati che stanno sotto allo slider.