Vai al contenuto

problema CSS z-index


macsig

Messaggi raccomandati

Ciao, sto creando un menu orizzontale a 2 livelli ed ho il seguente problema: vorrei che il menu di primo livello fosse posizionato "sopra" a quello di secondo in quanto quello di secondo livello ha un bordo colorato

che vorrei non fosse visibile dove c'e' l'elemento di primo livello selezionato.

Ho provato a settare per z-index:0 per il "sub" ed z-index:1 per il "main" ma senza successo. :rofl::cry::rofl:

Questo e' il codice

#nav {
   position: absolute;
   top: 80px;
}

#nav ul { 
   margin: 0px;
   list-style: none; 
   padding: 0px;
}


#nav li { 
   float: left; 
   color: #fff; 
   background: #C43219 url(images/nav.gif) no-repeat 0px 0px; 
   margin: 0px; 
   padding:0px 0px 0px 10px;
}

#nav a { 
   float: left; 
   display: block; 
   color: #fff; 
   padding: 10px 20px 5px 10px; 
   background: #C43219 url(images/nav.gif) no-repeat 100% 0px; 
   text-decoration: none; 
   font-weight: bold; 
}

#nav a:hover { 
   color:#BFE1ED; 
}

#nav .current li { 
   background: #1995C2 url(images/nav.gif) no-repeat 0 -41px; 
   color: #fff; 
   border-style: solid;
   border-width: 0px 0px 1px 0px;
   border-color:#0000CC;
   z-index: 1;
}

#nav .current li a { 
   background: #1995C2 url(images/nav.gif) no-repeat 100% -41px; 
   padding: 10px 20px 5px 10px;
   color: #fff;
   z-index: 1;

}

#nav .sub  {
   display: none;
   z-index: 0;
}

#nav .current .sub
{
   display:block;
   position:absolute; 
   top:20px;
   left:0px;
   width: 800px;
   background-color: #fff;
   border-style: solid;
     border-width: 1px 1px 0px 1px;
     border-color: #666666;
   z-index: 0;
}

#nav .tab a:hover .sub, 
#nav .tab li:hover .sub {
   display:block; 
   position:absolute; 
   top:30px; 
   left:0px; 
   width: 800px;
   background-color:#fff;
   border-style: solid;
     border-width: 1px 1px 0px 1px;
     border-color: #666666;
   z-index: 0;
}


#nav .current .sub li {
   display: inline;
   background: #fff; 
   padding: 10px 0px 5px 10px; 
   width: auto;
   height: 18px;
   white-space: nowrap; 
   font-weight: normal; 
   font-size: 12px;
   z-index: 0;
}

#nav .tab a:hover .sub li , 
#nav .tab li:hover .sub li {
   display: inline;
   background: #fff; 
   padding: 10px 0px 5px 10px; 
   width: auto; 
   height: 18px;
   white-space: nowrap; 
   font-weight: normal; 
   font-size: 12px;
   z-index: 0;
}

#nav .current .sub li a {
   display: inline;
   color: #666666; 
   background: #fff;
   width: auto;
   padding: 0px 0px 0px 0px;
   margin: 0px 0px 0px 0px;
   white-space: nowrap;
   font-weight: normal;
   font-size: 12px; 
   height: 18px;
   z-index: 0;
}

#nav .tab a:hover .sub li a, 
#nav .tab li:hover .sub li a {
   display: inline;
   color: #666666; 
   background: #fff;
   width: auto;
   padding: 0px 0px 0px 0px;
   margin: 0px 0px 0px 0px;
   white-space: nowrap;
   font-weight: normal;
   font-size: 12px; 
   height: 18px;
   z-index: 0;
}

<div id="nav">
       <ul class="current">
           <li><a href="#">Posta</a>    
               <ul class="sub">
                   <li><a href="#">function</a></li>
                   <li><a href="#">function</a></li>
                   <li><a href="#">function</a></li>
                   <li><a href="#">function</a></li>
                   <li><a href="#">function</a></li>
               </ul>
            </li>
       </ul>
       <ul class="tab">
           <li><a href="#">Commerciale</a>
               <ul class="sub">
                   <li><a href="#">function2</a></li>
                   <li><a href="#">function2</a></li>
                   <li><a href="#">function2</a></li>
                   <li><a href="#">function2</a></li>
                   <li><a href="#">function2</a></li>
               </ul>
           </li>
       </ul>
       <ul class="tab">
           <li><a href="#">Main2</a></li>
       </ul>
       <ul class="tab">
           <li><a href="#">Main3</a></li>
       </ul>
   </div>        

Dove sbaglio ??? ;):mad::oops:

:ghghgh::ciao::shock:

Alla Prossima...

Link al commento
Condividi su altri siti

Archiviato

Questa discussione è archiviata e chiusa a future risposte.

×
×
  • Crea Nuovo...