Effetto hover

[samiel]

Ho strutturaro in questo modo il menu dei link di una pagina:

HTML

<ul class="navbar">
		[*]Il nostro Bed&#038;Breakfast
		[*]Il paese
		[*]La storia
		[*]Le tradizioni
		[*]Indirizzi utili
		[*]Scrivici
	[/list]

CSS
[code]ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 10em; /*sposta in basso*/
left: 3em; /*muove verso destra*/
width: 10em;
}

ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid #1A2894;
}

ul.navbar a {
text-decoration: none;
}

a:link {
font-weight: bold;
color: #1A2894;
}

a:visited {
font-weight: bold;
color: #1A2894;
}[code]

Vorrei un effetto hover che, al passaggio mouse, invertisse
sfondo bianco e testo blu. Il codice:

[code]a:hover {
font-weight: bold;
color: #FFFFFF;
background: #1A2894;
}[code]

non è quello che desidero, perché fa diventare blu
solo lo sfondo prossimo alle parole, e non l'intera casella.
Mi date uno spunto per ottenere questo risultato?

Grazie
M.

[oronze]

perchè non hai associato hover al li.
dovresti dare una classe al tag li (ad esempio nav) e poi strutturare il css con
a.nav:hover{
codice
}
e cmq andava postato in css

[samiel]

Ho provatoa fare così:

CSS

li.nav

a.nav:hover {
    font-weight: bold;
    color: #FFFFFF;
    background: #1A2894;
}

HTML

<ul class="navbar">
		<li class="nav">Il nostro Bed&#038;Breakfast
		[*]Il paese
		[*]La storia
		[*]Le tradizioni
		[*]Indirizzi utili
		[*]Scrivici
	[/list]

ma continua a modficare solo lo sfondo del testo
e non la casella intera... Ma devo aver capito male
il tuo suggerimento...

Grazie
M.

[oronze]

togli la classe dal tag a e poi....che cella? mica è una tabella...è un elenco...ora sono io che non ti seguo...quale cella vuoi che si colori?

[samiel]

Mi sono espresso male...
Voggio che si colori tutto lo sfondo bianco
(che impropriamente ho denominato cella)
in cui è incluso il testo, o melgio vorrei
che, al passaggio del mouse, il testo blu
diventasse bianco e lo sfondo bianco blu...

M.

[oronze]

ma che sfondo? quello della pagina? oppure vuoi che totto il testo venga visualizzato un rettangolino? in quel caso devi usare background-color: #669900;

[samiel]

Non mi pare così difficile... Il menu cliccabile
è un elenco, costituito da dei rettangoli bianchi
(con un bordo nero spesso) e all'interno di questi
rettagoli stanno le scritte in blu, cliccabili.
Io vorrei costruire un effetto hover per cui
quando passo sul testo da cliccare non solo
lo sfondo immediatamente dietro al testo
(effetto che sono riuscito a riprodurre)
ma tutta la casella rettangolare prendesse
il blu come colore di sfondo e, al contempo,
il testo da blu diventasse bianco.

M.

[samiel]

Per la cronaca, ho risolto così:

.navbar{
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 10em;
    left: 3em;
    width: 12em;
}
.navbar a{
display:block;
text-decoration:none;
border-right: 1em solid #1A2894;
margin: 0.5em 0;
padding:3px 10px;
background:white;
font-weight: bold;
color:#1A2894;
}
.navbar a:link,
background:white;
color:#1A2894;
}
.navbar a:visited,
.navbar a:focus,
.navbar a:active{
background:grey;
font-weight: bold;
color:black;
border-color:#000;
}
.navbar a:hover{
background:#1A2894;
font-weight: bold;
color:#FFFFFF;
border-color:#000000;
}
.navbar .curr a:link,
.navbar .curr a:visited,
.navbar .curr a:hover,
.navbar .curr a:focus,
.navbar .curr a:active{
background:#DCDCDC;
font-weight: bold;
color:#000000;
}

M.