Menu solo CSS che non funziona!

[Niniane]

Visto che la ruota gira e tutto ti torna finché non l'hai risolto ecco che mi ritrovo a dover fare un menù a comparsa dovendo usare proprio la tecnica dell display:none che all'hover diventa visibile.

Ho preso spunto dall'esempio di Racoon29 (che funziona) e cerco di fare la stessa cosa su un menù ma non funziona...non ne vuole sapere...non so più cosa tentare/cambiare/indovinare/supporre/ipotizzare eccetera

Qualcuno può darmi qualche dritta?
Posto il codice:.

HTML

<div id="box_menu">
<ul id="menuNavigazione">[*]
Prima voce
<ul>[*]Prima sottovoce[*]Seconda sottovoce[*]Terza sottovoce[*]Quarta sottovoce[/list]
[*]Seconda voce[*]Terza voce[*]Quarta voce[/list]
</div>

CSS


#box_menu {
margin:0;
padding:0;
width:175px;
background:#FFFFFF;
}
#box_menu #menuNavigazione {
position:relative;
margin:0;
padding:0;
width:100%;
list-style:none;
border-top:1px solid;
}
#box_menu #menuNavigazione li a {
display:block;
margin:0;
padding:0;
width:100%;
}
#box_menu #menuNavigazione ul {
display:none;
border-top:1px solid;
margin:0;
padding:0;
width:175px;
}
#box_menu #menuNavigazione a:hover ul {
display:block;
}

#menuNavigazione ul{
top: 0;
left: 175px;
position: absolute;
list-style:none;
}


PERCHE' NON FUNZIONA????
Eppure a me sembra di fare la stessa cosa!!!

Dove sbaglio??? DOVEEEEEEEEEEEEEEEEEEEEEEEE????????

Questi sono i momenti in cui vorrei aver fatto l'draulico...magari il primo idraulico donna della storia...
porc...

[mucu]

un elemento inline <a> non può contenere un elemento block <ul>
devi rivedere completamente il css usando li:hover e non a:hover

[Mich_]

usando li:hover e non a:hover

In treoria e` giusto, in pratica ci sono probelmi con IE che riconosce le pseudoclassi solo sui link.

@Niniane:
Prova a vedere i menu pronti: fai sicuramente piu` presto a modificare solo la grafica di uno che funziona, che a sistemare la logica di uno che evidentemente non va (*).
Tra i "link utili" - sezione menu - cerca quelli di CSSplay, che sono fatti bene e ben catalogati.


(*) non ho provato a guardare cosa non va, comunque mi pare di non trovare due selettori corrispondenti, che potrebbero essere:
#menuNavigazione a ul { ... display: none; ... }
#menuNavigazione a:hover ul { ... display: block; ... }

[Niniane]

Originariamente inviato da mucu
un elemento inline <a> non può contenere un elemento block <ul>
devi rivedere completamente il css usando li:hover e non a:hover

Scusa ma l'elemento a che è inline di default è stato reso display:block inoltre non mi risulta che la pseudoclasse :hover possa essere associata all'elemento li.

Originariamente inviato da Mich_
@Niniane:
Prova a vedere i menu pronti: fai sicuramente piu` presto a modificare solo la grafica di uno che funziona, che a sistemare la logica di uno che evidentemente non va (*).
Tra i "link utili" - sezione menu - cerca quelli di CSSplay, che sono fatti bene e ben catalogati.

Ho dimenticato di dire che la prova di menu che ho fatto non funziona nemmeno su Firefox il che è pure peggio.
In ogni caso avevo già proposto al cliente un paio di menù presi proprio da CSSplay ma me li hanno cassati perché secondo il loro SEO non sono graditi a Google e mi hanno chiesto di realizzarlo con questa tecnica. NOn ho il tempo materiale di proporre i menù di CSSplay (che sono tantissimi) e aspettare che il loro SEO faccia una scelta tra tanti purtroppo.

[Mich_]

Tra i menu di CSSplay ce n'e` sicuro almeno uno con la struttura che hai postato (probabilmente sono di piu`): da quelli puoi copiare il CSS per verificare se funziona.

Tornando al problema specifico:
Il tuo CSS prevede che il tag <ul> stia dentro il tag <a>, mentre nel codice HTML non e` cosi`. Credo sia per quello che non ti funziona.

E` vero che un <ul> non potrebbe stare dentro un <a>, ma i brwoser lo capiscono lo stesso. Il problema pero` e` che dentro un <a> non puoi metterci un altro <a> (e questo i browser non sanno risolverlo), cosa che faresti se le voci del <ul> interno dovessero diventare dei link.


PS: il discorso dei motori di ricerca.
Puo` essere vero per alcuni menu di CSSplay, ma non per tutti. Tra l'altro i menu vengono continuamente aggiornati, per cui per alcuni vecchi la struttura non e` corretta per XHTML Strict, per alcuni vecchi ci sono problemi con i motori, ma se guardi i commenti in alcuni c'e` scritto che sono stati aggiornati per tener conto delle limitazioni dei primi, mentre in altri ci sono segnate le limitazioni.
Comunque non sei obbligata a dire al cliente che hai preso ispirazione da una parte o l'altra; non occorre che copi da qualcuno, ma ti ispiri e poi realizzi tu.

[Mich_]

Ecco qui una cosa che potrebbe fare al caso tuo: nota come sono stati usati i commenti condizionali.

http://css.html.it/articoli/leggi/26...ascript-delay/

[Niniane]

In effetti non mi ero resa conto che il mio css prevedeva che la lista del sottomenù fosse inserita all'interno dell'href per poter funzionare. Ero talmente fissata su un'idea che non vedevo l'elefante rosa sullo schermo...

Sono andata a rivedermi la Pocket Rerefence O'Reilly e in effetti l':hover è teoricamente applicabile a qualunque elemento sul quale sia plausibile un mouseover anche se la guida dice che non ci sono in realtà indicazioni precise su quali sarebbero esattamente questi elementi.
Mettendo l':hover al li il meccanismo funziona su tutti i browser tranne (manco a dirlo indovinate un pò) IE6 per cui l':hover funziona solo se collegata ai link.
Ergo ho aggiunto nel css un blocco che dovrebbe rendere il sottomenu visibile all'hover sull'a ma non funziona...non so...sono alla frutta...
Se qualcuno ha un suggerimento su come risolvere la cosa è bene accetto.

Riguardo al dire al cliente da dove prendo spunto (quando lo faccio) io in genere non lo dico e di certo non mi sento obbligata a farlo. In questo lavoro però ci sono tali e tanti paletti (primo fra tutto che sto gestendo un sito fatto ancora a tabelle alla vecchia maniera che mischia tabelle div e non so cos'altro nella maniera più anarchica possibile e che devo rifare un pezzo alla volta dovendo costantemente litigare con un layout e una logica ormai sorpassata). La cosa ironica è che mi hanno cassato un menù quando in quel sito ci sono talmente tante cose che non funzionano a livello di css e di struttura delle pagine che un menù fa ben poca differenza. MAH!!!

Have a nice day guys.