Dubbi su ereditariertà

[VaLvOnAuTa]

Avevo fatto un menu a tendina con css, xhtml e javascript.
Ho pensato bene di convertirlo in solo css.
In pratica ho un item passando il mouse sul quale un div nascosto (che conteniene un elenco di link i quali a sua volta reagiscono cambiando colore all'evento onmouseover) viene mostrato. (Qua l'esempio)

Ora volevo riprodurre la stessa cosa usano solo css. Il problema si palesa nel momento in cui devo inserire i link nel div nascosto. Evidentemente quei link prendono come stile quello dell'elemento padre. Vi mostro il codice per farmi capire:

[supersaibal]<div id="regional">
 <a href="#">
  ciao
  <span id="menu">
   test
  </span>
 </a>
</div>[/supersaibal]

Non posso far sì che l'<a> dentro lo span abbia un comportamento differente rispetto a quello interno al div id=regional, vero?

[pierofix]

span a {
   /* liberami dal padre padrone */
}

[VaLvOnAuTa]

Cioè così?

#regional {
}
#regional a {
}
#regional a:hover {
}
#regional a:hover span {
}
#regional a:hover span a{
}

[pierofix]

La sintassi è corretta, ma tu esattamente cosa vorresti fare?

[VaLvOnAuTa]

lo stesso che succede nei menu del link solo che anzichè farli usando javascript vorrei usare solo css.
Ho usato il codice di prima ma non mi funziona l'ereditarietà fatta in quel modo.
In pratica passo il mouse su un testo e mi si deve mostrare un div (precedentemente nascosto) che contiene una serie di link che a loro volta devono modificarsi (cambiando colore e sfondo) al passaggio del mouse.

[andrea.paiola]

prendi pure spunto dal CSS del mio sito...

[VaLvOnAuTa]

Ok ho ripreso il tuo css e l'ho riadattato al mio sito.
Solo una cosa non capisco: perchè lo stile dei link degli elenchi si propaga a tutti i link della pagina? C'è modo di risolvere la questione?

[andrea.paiola]

:master: strano dovresti vedere quali id e classi usi e vedere di darlo solo all'id menu (se hai usato quello per il menù)

[VaLvOnAuTa]

Cioè

[supersaibal]#menu li ul li a:active, a:focus, a:hover { 
border: 1px #669999 solid;
padding: 0px; 
background-color: #336666; 
color: #669999;}[/supersaibal]

dovrebbe diventare

[supersaibal]#menu li ul li a:active, #menu li ul li a:focus, #menu li ul li a:hover { 
border: 1px #669999 solid;
padding: 0px; 
background-color: #336666; 
color: #669999;}[/supersaibal]

[andrea.paiola]

si adesso l'ho messo a posto anche sul mio sito