CSS per menu a tendina

**kodode** · 06-10-2008, 14:55

Ciao a tutti!

Seguendo una guida stovo cercando di implementare un menu a tendina... su firefox funzia su i.e. no

Per funzia intendo che i "sotto menu" appaiono quando passo il mouse sopra...
ecco i CSS:

#topmenu ul, #topmenu ul ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#topmenu ul a {
display: block;
width: 10em;
}
#topmenu ul li {
float: left;
width: 10em;
}

#topmenu ul li ul {
position: absolute;
width: 10em;
left: -999em;
}
#topmenu ul li:hover ul {
left: auto;
}

#topmenu ul li ul ul {
margin: -1em 0 0 10em;
}

#topmenu ul li:hover ul ul {
left: -999em;
}

#topmenu ul li:hover ul, #topmenu ul li li:hover ul {
left: auto;
}

dove sbaglio?

**Mich_** · 06-10-2008, 15:02

Per IE intendi IE6? Perche` tale browser non accetta le pseudoclassi su oggetti diversi da link.

Per cui il tuo:
#topmenu ul li:hover ul {

dovrebbe diventare:
#topmenu ul li a:hover ul {

(pero` controlla che la marcatura sia corretta per questo selettore).

Tra i "link utili" del forum ci sono vari esempi di menu (vedi ad es. quelli di CSSplay), che di norma funzionano in tutti i browser attualmente in uso.

**kodode** · 06-10-2008, 15:37

grazie per l'aiuto... intendo ie7
allora io ho modificato cosi:

#topmenu ul, #topmenu ul ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#topmenu ul a {
display: block;
width: 10em;
}
#topmenu ul li {
float: left;
width: 10em;
}

#topmenu ul li ul {
position: absolute;
width: 10em;
left: -999em;
}
#topmenu ul li:hover ul {
left: auto;
}

#topmenu ul li ul ul {
margin: -1em 0 0 10em;
}

#topmenu ul li:hover ul ul {
left: -999em;
}

#topmenu ul li:hover ul, #topmenu ul li li:hover ul {
left: auto;
}



ma nulla... invece su http://www.cssplay.co.uk/ie/
non capisco dove cercare...
un'altro piccolo aiutino? grazie...

**Mich_** · 06-10-2008, 16:04

Perche` vai a cercare i siti PER ie?
Io ti indicavo i siti di MENU, che mi risulta funzionino dappertutto, compreso IE: vedi http://www.cssplay.co.uk/menus/

E non credo sia utile fare dei CSS specifici per IE: si riesce a fare dei CSS che funionano dappertutto.
Non so dirti dove sbagli, dato che non ho la tua marcatura, non ho il DOCTYPE che usi e non so esattametne quale menu vuoi implementare.
Sicuramente la sintassi postata non e` valida (non esistono i commenti condizionali in CSS, i commenti condiz vanno usati nel codice HTML).

Inoltre il tuo metodo presuppone marcature diverse per IE e per gli altri, cosa che complica molto il tutto, e rende difficilissima la manutenzione.
Si riesce a realizzare menu che funzionino in tutti i browser, come mostrano gli esempi.

**kodode** · 06-10-2008, 16:08

hai perfettamente ragione... stavo cercando una soluzione...

cmq sembra che metto uno
background-color : #d3d4dc;

e precisamente

#topmenu ul li:hover ul {
left: auto;
background-color : #d3d4dc;
}

funziona anche con ie7 ...

nn ho idea... tu che ne pensi? grazie

**Mich_** · 06-10-2008, 16:41

#topmenu ul li:hover ul {

Sicuramente NON funziona in IE6 (con qualsiasi DTD).

In IE7 dovrebbe funzionare: sicuramente se usi una DTD XHTML 1.0 strict o successiva, con qualche dubbio se usi una transitional.

**kodode** · 06-10-2008, 16:52

uso
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

com CMS joomla

e #topmenu ul li:hover ul {

se metto #topmenu ul li a:hover ul {

fa peggio perchè non visualizzo nemmeno il primo livello. Penserei che il problema qui in questa parte:

/* questo dovrebbe servire per nascondere il secondo livello del menu*/

#topmenu ul li:hover ul ul {
left : -999em;
}

/* questo dovrebbe servire per mostrare il secondo livello del menu quando passo sopra alla voce*/
#topmenu ul li:hover ul, #topmenu ul li li:hover ul {
left : auto;
}

Per nasconderlo lo nasconde ma poi (solo in ie7) non lo mostra...
che ne pensi? grazie...

**kodode** · 15-10-2008, 14:16

scusa se insisto...

riassumo la mia situazione:

<div id="topmenu">
<ul >
[*]titolo principale
<ul>
[*]primo livello 1
[*]primo livello 2
[*]primo livello 3
<ul>
[*]secondo livello 1
[*]secondo livello 2
[/list]

[/list]

[/list]
</div>
nella pagina index.php ho

invece nel css ho:

#topmenu li a {

padding-left : 10px;
padding-right : 10px;
font-size : 11px;
color : #000033;
text-decoration : none;

}
#topmenu li a:hover {
font-size : 11px;
color : #999999;
}

#topmenu ul, #topmenu ul ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}

#topmenu ul a {
display: block;
width: 10em;
}

#topmenu ul li {
float: left;
width: 10em;
}

#topmenu ul li ul {
position: absolute;
width: 10em;
left: -999em;
}

#topmenu ul li ul ul {
margin: -1em 0 0 10em;

}

#topmenu ul li:hover ul ul {
left: -999em;
}

#topmenu ul li:hover ul, #topmenu ul li li:hover ul {
left: auto;
background-color : #d3d4dc;
}

con Firefox funziona mentre con ie7 niente... Dove sbaglio?

grazie...

**Mich_** · 15-10-2008, 15:29

Piuttosto confuso il tutto: serve una passata di logica.
E serve che impari ad usare i tag VB del forum (prova con il tastino # nel form di inserimento), altrimenti mi si incrociano gli occhi: io ho necessita` che il codice sia strutturato con le indentazioni corrette, altrimenti mi perdo.

Comunque ci sono attributi ripetuti nel CSS (ad esempio font-size in #topmenu li a e in #topmenu li a:hover - non e` sbagliato in se`, ma crea ulteriore confusione), e permangono pseudoclassi applicate al li, che IE non interpreta (salvo che usi la DTD XHTML Strict).

**kodode** · 15-10-2008, 15:38

ok allora... ho premuto il tastino #

codice:

#topmenu li a {

padding-left : 10px;
padding-right : 10px;
font-size : 11px;
color : #000033;
text-decoration : none;

}
#topmenu li a:hover {
color : #999999; 
}

#topmenu ul, #topmenu ul ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}


#topmenu ul a {
display: block;
width: 10em;
}

#topmenu ul li {
float: left;
width: 10em;
}

#topmenu ul li ul {
position: absolute;
width: 10em;
left: -999em;
}

#topmenu ul li ul ul {
margin: -1em 0 0 10em;

}

#topmenu ul li:hover ul ul {
left: -999em;
}

#topmenu ul li:hover ul, #topmenu ul li li:hover ul {
left: auto;
background-color : #d3d4dc;
}

cosi ho eliminato il "doppione"

ma non ho idea di come si risolva il problema

e permangono pseudoclassi applicate al li, che IE non interpreta (salvo che usi la DTD XHTML Strict).

a me basta semplicemente che passando con il mouse sopra a "primo livello 3"
appaia la lista "secondo livello 1" e "secondo livello 2"

porta pazionza ma sono un VERO neofita in queste cose e ho semplicemente seguito questa guida... http://wiki.linussio.org/images/e/ef/Scrolldown.pdf
grazie!

Discussione: CSS per menu a tendina

Strumenti discussione

Ricerca discussione

Visualizza

CSS per menu a tendina

Permessi di invio