menu a tendina sottomenu nascosto da slide

**mistergks** · 24-05-2014, 17:50

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:

codice:


<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:

codice:

#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:

codice:

/*=================================================
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;
}

**carlomarangoni** · 24-05-2014, 18:49

In:
menu ul li ul li:hover va messo un z-index:99

**mistergks** · 24-05-2014, 19:43

Originariamente inviata da carlomarangoni

In:
menu ul li ul li:hover va messo un z-index:99

Menu ul li ul li:hover non lo trovo nel css di sopra!!

**carlomarangoni** · 25-05-2014, 00:41

Originariamente inviata da mistergks

Menu ul li ul li:hover non lo trovo nel css di sopra!!

Crealo!

**mistergks** · 25-05-2014, 01:27

Originariamente inviata da carlomarangoni

Crealo!

Creato ma non ho risolto nulla!
Ho messo solo z-index:99; all'interno di menu: ul li ul li:hover
cosa puo essere?
Forse devo modificare qualcosa nel css dello slide?

**carlomarangoni** · 25-05-2014, 01:36

Originariamente inviata da mistergks

Creato ma non ho risolto nulla!
Ho messo solo z-index:99; all'interno di menu: ul li ul li:hover
cosa puo essere?
Forse devo modificare qualcosa nel css dello slide?

codice:

#menu ul li ul li:hover {z-index:99;}

senza i : dopo menu

**mistergks** · 25-05-2014, 17:20

Originariamente inviata da carlomarangoni

codice:

#menu ul li ul li:hover {z-index:99;}

senza i : dopo menu

Niente da fare.
non va.
ho provato anche ad aggiungere un position

**mistergks** · 26-05-2014, 16:53

Originariamente inviata da mistergks

Niente da fare.
non va.
ho provato anche ad aggiungere un position

Up

**Shores** · 31-05-2014, 15:20

Ogni elemento che abbia position diverso da auto stabilisce un contesto di stacking (impilamento) separato.

Questo vuole dire che lo z-index ha senso SOLO tra elementi che sono figli dello stesso padre, altrimenti non vedrai nessun effetto.

Detto in altri termini:
<body>
<div id=a style=z-index:3></div>
<div id=b style=z-index:4></div>
<div id=c style=z-index:1></div>
</body>

avrà degli effetti visibili, mentre

<body>
<div>
<div id=a style=z-index:3></div>
</div>
<div>
<div id=b style=z-index:4></div>
</div>
<div>
<div id=c style=z-index:1></div>
</div>
</body>

non avrà nessun effetto perchè gli ementi a cui hai dato z-index non sono nello stesso contesto, ovvero non hanno lo stesso padre.

Quindi, verifica di stare dando z-index ad elementi che abbiano lo stesso padre e vedrai che a quel punto modificare lo z-index avrà effetto, e sperimentando un poco potrai trovare l'ordine di visualizzazione che più ti è congeniale.

Discussione: menu a tendina sottomenu nascosto da slide

Strumenti discussione

Ricerca discussione

Visualizza

menu a tendina sottomenu nascosto da slide

Permessi di invio