menu a tendina finisce sotto i contenuti

[pancio beretta]

Buongiorno a tutti.
Mi spiace scomodarvi per una cosa che immagino sia semplice, ho cercato di sistemare da me avvalendomi del materiale trovato in rete ma non arrivo ad una soluzione. Il motivo è che sono alle prime armi e spesso perdo l'orientamento.
Sto lavorando su thema gratuito di wordpress, nello specifico:

http://vandelaydesign.net/oversized/

Come da titolo, il menù a tendina una volta visibile finisce sotto i contenuti.
Mi sembra di aver capito che ho a che fare con la questione z-index:

/* Dropdown */

#navigation ul li:hover a {
position:relative;
background:#000;
opacity: .65; filter: alpha(opacity=65);
text-decoration:none;
transition: all 0.5s ease 0s;
}

#navigation ul li:hover li a {
background:none;
color:#fff;
}

Sapete dirmi come risolvere?
Ve ne sarei grato...

[KillerWorm]

Ciao e benvenuto.
Sì, in generale si potrebbe risolvere impostando opportunamente z-index. Non riesco comunque a riprodurre il problema che indichi. Hai per caso risolto?




PS: quando posti del codice nel forum è opportuno usare i relativi tag di formattazioni (vedi regolamento di sezione che trovi tra i post in evidenza su ogni sezione del forum). Grazie.

[pancio beretta]

Lavorando sulle caratteristiche del menù non sono arrivato a nulla e ancora non mi spiego.
Ho ripiegato spostanto tutto il box dei contenuti con il z-index in negativo.
si capisce...difetto di esperienza.
grazie

[pancio beretta]

....purtoppo il mio espediente si è rivelato fallimentare. Apparentemente funziona perchè la tendina va in primo piano, solo che nel box-contenuti ora il cursore non reagisce a nessun link o immagine.

Ho ripristinato lo stato originario e inserito la voce z-index in "navigation ul li:hover a" ma non ho ottenuto l'effetto sperato.

#navigation {

    width:100%;
    background:url(images/divider_nav.png) repeat-x left bottom;
    padding-bottom:2px;

}

#navigation li {

    background:url(images/divider_nav.png) repeat-x scroll left top;
    display:block;
    font-size:18px;
    color:#e6d6b9;
    font-weight:500;
    position:relative;
    text-shadow:rgba(0, 0, 0, 1) 0px 1px 0px;

}

#navigation li.first, #navigation li:first-child {

    background:none repeat scroll 0 0;

}

#navigation a {

    display:block;
    color:#e2d1bd;
    padding:12px 20px;

}

#navigation a:hover, #navigation li.current-menu-item a {

    color:#e2d1bd;
    background: rgba(70, 7, 6, 0.43);

}

/* Dropdown */

#navigation ul li:hover a {

    position:relative;
    z-index:1000;
    background:rgba(0, 0, 0, 0.4);
    text-decoration:none;

}

#navigation ul li:hover li a {
    background:rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color:#fff;

} 

[pancio beretta]

Ho cambiato strategia. A quanto pare funziona se metto lo z-index sull'intera colonna che ospita i menù:

#column1st {

    background:url(images/bg_col77.png) repeat scroll 0 0;

    width:300px;

    height:100%;

    float:left;

    margin:0 0 0 40px;

    position:fixed;
z-index:1000;
} 

[pancio beretta]

Con chrome ed explorer: posizionandomi sul menù la tendina si apre ed è in primo piano. Se clicco sul bottone e lascio il cursore immobile la tendina non si apre se non con il primo movimento sul pulsante stesso.
Dopo tutto questo stress la cosa mi risulta fastidiosa.

Su firefox funziona alla perfezione.

[KillerWorm]

Posta il link alla tua pagina pubblica dove sta il problema, altrimenti è difficile poterti aiutarti.

[carlomarangoni]

Metti il z-index a tutto il blocco del menu

[pancio beretta]

Ho proprio fatto così. Grazie.