problema con tendina del menù, scompare 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 potrei risolvere?
Ve ne sarei grato...

 

[Max 1]

Si infatti devi dare un z-index al menu!

N.B. Per postare del codice nel forum è opportuno che tu usi il relativo TAG [ code]....[/code]

 

[pancio beretta]

Grazie. Lavorando sul menù non ho raggiunto risultato, non mi spiego perchè.

Ho ripiegato usando il z-index con valore negativo sul box dei contenuti.

 

[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;

}

dove sbaglio?

 

[Max 1]

Visto da dispositivo mobile il link che hai postato nel primo post non presenta il problema! Da desktop non ho provato!
Dacci il link alla pagina che da errore così possiamo capire dove c'è l'errore

 

[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;
}

E' stata una giornata lunga e stressante...
Comunque grazie.

 

[pancio beretta]

...da cosa nasce cosa, ora su dispositivo mobile i contenuti si nascondono sotto al menù.
E' lo stesso problema che ha anche il thema di wp da cui parto:

http://vandelaydesign.net/oversized/

 

[Max 1]

...da cosa nasce cosa, ora su dispositivo mobile i contenuti si nascondono sotto al menù.
E' lo stesso problema che ha anche il thema di wp da cui parto:

http://vandelaydesign.net/oversized/

In questo link non si può capire il problema perchè il menu non va sotto a nulla anche perchè non mi sembra di vedere contenuti!

Prova a mettere un z-index anche nella class="sub-menu"