CSS - menù - onmouseover

[pegaso22]

Ciao a tutti,
sto utilizzando questo codice per il mio menù a tendina:

#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display: block;
	width: 126px;
}

#nav li { /* all list items */
	float: left;
	width: 126px; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
	position: absolute;
	background: orange;
	width: 126px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li ul ul { /* third-and-above-level lists */
	margin: -23px 0 0 173px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

#content {
	clear: left;
	color: #ccc;
}

Mi servirebbe modifica, nel secondo livello, il colore dello sfondo al passaggio sopra con il mouse.

Qualcuno può darmi una mano?

Attendo risposta.
Grazie mille!

[gra-fichetto]

Aggiungi al tuo CSS:

#nav li ul li a:hover{
	color: #E0E0E0
}

Naturalmente, cambia il codice (nell'esempio #E0E0E0) per ottenere il colore che preferisci.

[pegaso22]

ti ringrazio per il suggerimento solo che così mi cambia solo il colore della scritta non il background della "cella".

come devo modificare?

[gra-fichetto]

Originariamente inviato da pegaso22
ti ringrazio per il suggerimento solo che così mi cambia solo il colore della scritta non il background della "cella".

come devo modificare?

#nav li ul li a:hover{
background: #E0E0E0;
	color: #FFF
}

Ad esempio.

[pegaso22]

Ottimo!!! Grazie mille.

Se ho altri intoppi scrivo nuovamente!!

[gra-fichetto]

Di nulla.

[pegaso22]

Nuovo problema...

posto il codice un pò modificato:

#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display: block;
	width: 96px;
}

#nav li { /* all list items */
	float: left;
	width: 96px; /* width needed or else Opera goes nuts */
}

#nav li ul h1 { /* all list items */
	float: left;
	width: 200px;
	height: 24px;
}

#nav li ul h1 a:hover{
width: 200px;
height: 24px;
background: #E0E0E0;
	color: #FFF
}

#nav li ul { /* second-level lists */
	position: absolute;
	background: orange;
	width: 200px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}


#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

#content {
	clear: left;
	color: #ccc;
}

Praticamente ho il primo passaggio del menù largo 96px mentre il secondo 200px.
Il mouseover del secondo passaggio è attivo solo per la larghezza 96px mentre io lo vorrei per tutti i 200px.

come devo modifciare?

Inoltre all'interno dei retatngoli che mi crea ho delle scritte, come posso posizionarle centrate in altezza e larghezza?

Fammi sapere.
Grazie di nuovo!

[gra-fichetto]

Dovrei vedere l'intera pagina.

Originariamente inviato da pegaso22
#nav li ul h1 { /* all list items */
float: left;
width: 200px;
height: 24px;
}
#nav li ul h1 a:hover{
width: 200px;
height: 24px;
background: #E0E0E0;
color: #FFF
}
[/code]

Soprattutto per capire questo...

[pegaso22]

il resto della pagina è così:

<td height="30">[*]
<%
if session("pagina") = "Home" then
%>
	[img]home1.gif[/img]
<%
else
%>
	[img]home2.gif[/img]
<%
end if
%>

</td>



<td height="30">[*]
<%
if session("pagina") = "azienda" then
%>
	[img]azienda1.gif[/img]
<%
else
%>
	[img]azienda2.gif[/img]
<%
end if
%>
	<ul>
		<%
		if totrec > 0 then
			rs.movefirst
			while not rs.eof 
				Response.Write("<h1>" & rs("titolo") & "</h1>")
				rs.movenext
			wend
		end if
		%>
	[/list]

</td>

[gra-fichetto]

I link del secondo livello risentono della regola che gli hai applicato e cioè:

#nav a {
	display: block;
	width: 96px;
}

Praticamente, il "width:"96px".