problemi con i titoli dei menù

**fabio ventura** · 05-10-2010, 19:03

Ho questa lista, che si tramuta in un menu orizzontale a tendina trascrivo il codice html:
</head>

<body>
<div class="menu">
<ul id="menu2livelli">
<li class="primo">home
<li class="primo">mission
<li class="primo">progetti
<ul> [*]urbanistica
[*]edifici
[*]interni
[*]impianti
[/list]

<li class="primo">lo studio
<ul>
[*]il capoccia
[*]lo staff
[*]free lance
[*]impianti
[/list]

<li class="primo">contatti

[/list]

</div>

</body>
</html>

ora riporto il css:

<style type="text/css">
div.menu{
width: 511px;
height: 28px;
position:absolute;
margin-left:445px;
margin-top: 35px;
font: Arial, Helvetica, sans-serif;
z-index: 1500;
}

ul#menu2livelli{
float: left;
margin: 0;
padding: 0;
list-style: none;
line-height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
}

ul#menu2livelli li ul li{
float:left;
list-style: none;
margin: 0;
padding-top: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
color: #000000;
}

ul#menu2livelli li {
float: left;
margin: 0;
padding: 0;
width: 95px;
height: 20px;
font-size: 14px;
}

ul#menu2livelli a:link,
ul#menu2livelli a:visited{
display: block;
padding: 2px 2px;
text-decoration: none;
color: #7f8c9c;
}

ul#menu2livelli a:hover,
ul#menu2livelli a:focus
ul#menu2livelli a:active{
color: #ff0000;
text-decoration: none;
}

ul#menu2livelli li ul {
display: none;

}

ul#menu2livelli li:hover ul {
display:block;
position: absolute;
z-index: 1;
width: 100px;
padding: 0;
margin: 0 0 0 -1px;
font-size: 14px;
}

ul#menu2livelli li li{
width: 80px;
border-bottom:1px solid #B2B2B2;
}

per ultimo ho aggiunto il richiamo child a primo,

.primo{
color: #000000;
}

</style>

non succede nulla cioè il titolo dei menù non viene differenziato dalle voci di sotto menu, sbaglio qualcosa oppure qualche blocco di codice entra in conflitto?
Un saluto da fabio

**Prill** · 05-10-2010, 21:15

Ciao Fabio, tu crei una classe che assegni a una voce elenco, il link al suo interno segue comunque le impostazioni date per i collegamenti, è a questi ultimi che va applicata la classe. In realtà quando vuoi specificare impostazioni diverse per un elemento, per evitare possibili conflitti, sarebbe preferibile creare più classi diverse, non volendo farlo, dovendo essere i link in primo piano neri, potresti avere

codice:

ul#menu2livelli a {
display: block;
padding: 2px 2px;
text-decoration: none;
color: #000;
}
ul#menu2livelli li a:hover,
ul#menu2livelli li a:focus
ul#menu2livelli li a:active{
color: #ff0000;
}

ul#menu2livelli li ul li a{
color: #7f8c9c;
}

**fabio ventura** · 05-10-2010, 23:53

ora ci provo spero di aver capito, anche se sono un pò perplesso :
Ti potresti spiegare in maniera più elementare.
Grazie

**Prill** · 06-10-2010, 10:45

Ti potresti spiegare in maniera più elementare

copia e incolla nella tua pagina all'interno dell'elenco così ti rendi conto del primo errore

codice:

<li class="primo">questo testo è nero perché nella classe "primo" ho assegnato 
il colore nero <a href="#">questo è un link, le sue impostazioni saranno quelle predefinite
oppure impostate nel css per i link</a>

se il link deve essere nero, il nero dobbiamo impostarlo su di esso (<a class="primo" ...> e non sul suo contenitore.

Ma se pure imposti la tua classe sul link, non funzionerà.
Quando si definiscono direttamente degli elementi ("a" nel tuo caso) e poi si vogliano differenziarli, è possibile vi siano conflitti o interferenze e visualizzazioni non volute, per questo potrebbe essere più conveniente lasciare i vari link del tutto indipendenti creando direttamente classi diverse, ad esempio

codice:

a.menu {proprietà1: xxx; proprietà2: yyy; proprietà3: zzz;}
a.submenu {proprietà1: aaa; proprietà2: bbb; proprietà3: zzz;}

Ma se non vogliamo creare troppe classi e stiamo seguendo un certo criterio, allora facciamolo sino in fondo.
Nel tuo caso, quand'anche applico la classe "primo" al link in primo piano questo continua ad essere grigiastro e non nero perché le impostazioni cui il browser dà priorità sono quelle di "ul#menu2livelli a {...}"

Poiché stai usando selettori discendenti, definendo elementi all'interno di altri, allora continuiamo su questa strada seguendo il giusto ordine e applicando il nero come colore di partenza generale

codice:

ul#menu2livelli a {
display: block;
padding: 2px 2px;
text-decoration: none;
color: #000;
}

lasciamo le indicazioni per i vari stati dei link (aggiungi una "," saltata, dopo a:focus)

codice:

ul#menu2livelli a:hover,
ul#menu2livelli a:focus,
ul#menu2livelli a:active{
color: #ff0000;
}

e sovrascriviamo il colore per i link del sottomenu

codice:

ul#menu2livelli li ul li a {
color: #7f8c9c;
}

oppure se vogliamo avere la nostra classe "primo" inseriamola così

codice:

ul#menu2livelli a.primo {color:#000}

Discussione: problemi con i titoli dei menù

Strumenti discussione

Ricerca discussione

Visualizza

problemi con i titoli dei menù

Permessi di invio