problema con tendina del menù, scompare sotto i contenuti

pancio beretta

Nuovo Utente
1 Feb 2016
6
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.312
334
83
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]
 
Ultima modifica:

pancio beretta

Nuovo Utente
1 Feb 2016
6
0
0
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

Nuovo Utente
1 Feb 2016
6
0
0
....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.

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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.312
334
83
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

Nuovo Utente
1 Feb 2016
6
0
0
Ho cambiato strategia. A quanto pare funziona se metto lo z-index sull'intera colonna che ospita i menù:

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

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.312
334
83
...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"