li : cambiare colore allo sfondo quando a:hover

[Whitecrowsrain]

salve a tutti
ho questo problema:
vorrei creare una lista che abbia uno sfondo e apparisse come se fosse una pulsantiera.
all'interno della lista ci sono dei link che nel momento in cui ci paso sopra dovrebbe evidenziarsi tutta la riga della lista di un altro colore:

per indenderci:

ul
 {
    background: url("../img/menu.gif") repeat-y;
}

li a:hover{
  background-image:none; 
  background:#5F94B4;
}

pertanto avrò nella pagina html un codice del genere:

  <ul>[*]<a></a>[*]<a></a>
    ...[/list]

solo che invece di cambiare lo sfondo a tutta la riga si limiita a cambiarlo al testo del linkk, perchè?

[Whitecrowsrain]

Originariamente inviato da Dart89
Se non mi sbaglio

ul
 {
    background: url("../img/menu.gif") repeat-y;
}


li a {display: block;}

li a:hover{
  background-image:none; 
  background:#5F94B4;
}

perfetto, solo che adesso mi ha raddoppiato l'altezza del li...

[Whitecrowsrain]

ho risolto..ho messo

a{height:0}

ed ho risolto...giusto no?

[Whitecrowsrain]

il problema è che ora con Internet Explorer se non metto a{height:0} mi fa la doppia linea ma con firefox invece se lo metto mi sovrappone i link...quale è quel tag che fa in modo che il comando CSS venga letto solo da IE?

[Mega69]

Non si tratta di tag bensì di hack;
*html #idElemento { //proprietà lette solo da IE }

[Whitecrowsrain]

Originariamente inviato da Mega69
Non si tratta di tag bensì di hack;
*html #idElemento { //proprietà lette solo da IE }

ok fin qui tutto ok, ma non capisco perchè cmq mi metta una righetta in più quando lo visualizzo con internet explorer anche se metto l'altezza del li a 0, mentre con con FireFox viene una cosa molto più omogenea sullo stile del menu a sinistra dell' Home page di html.it...

come mai?

[Mich_]

Come ho gia` scrittp piu` volte, il problema lo si risolve facendo occupare al tag <a> tutto lo spazio del suo contenitore:

li a {
  display: block;
  width: 100%; height: 100%;
}

Ci sono dei problemi con i blocchi in IE.
E si ovvia, insrendo delle regole CSS che vengano lette solo da IE.

L'hack proposto non e` dei piu` furbi (non si sa come verra` interpretato dalle prossime versioni del browser): conviene invece usare i commenti condizioniali (vedi tra i "link utili" per la loro sintassi).

[Whitecrowsrain]

Originariamente inviato da Mich_
Come ho gia` scrittp piu` volte, il problema lo si risolve facendo occupare al tag <a> tutto lo spazio del suo contenitore:

li a {
  display: block;
  width: 100%; height: 100%;
}

grazie mille, era quello che stavo cercando!

ora però ho un altro piccolo problema, perchè vorrei mettere dei sottomenu e se scrivo

div#navigation menu
{
  color:#0060A0;
  margin-left:20px;
  padding: 0;
  list-style-type: none;
}
div#navigation menu a
{
	color:#E26200;
	font: normal bold 1.1em/1.2em arial,sans-serif;
	display: block;
	width: 100%; 
	height: 100%;
}

e quindi poi ho un menù del genere

  <ul>[*]
    <menu> [*]
         
    </menu>[*][*][/list]

ho lo stesso tipo di problema che avevo prima con ul, e quindi quello che ho scritto per i menu nei css non viene interpretato, nemmeno il font dei caratteri viene interpretato(che rimane lo stesso definito precedentemente per <ul>), dove sbaglio?

[Mich_]

Non riesco a capire.

Intanto il codice HTML che hai postato non ha senso. Un menu a due livelli ha la struttura:

<ul class="menu">[*] ...[*]... <ul class="sotto1menu"> [*] ... [*] ... [/list][*][*][/list]

Notare che l'<ul> interno st DENTRO il[*] cui si riferisce.

Chiaramente il CSS dovra` rifarsi a tale struttura, nei vari modi di specificare i selettori.

[Whitecrowsrain]

Originariamente inviato da Mich_
Non riesco a capire.

Intanto il codice HTML che hai postato non ha senso. Un menu a due livelli ha la struttura:

<ul class="menu">[*] ...[*]... <ul class="sotto1menu"> [*] ... [*] ... [/list][*][*][/list]

Notare che l'<ul> interno st DENTRO il[*] cui si riferisce.

Chiaramente il CSS dovra` rifarsi a tale struttura, nei vari modi di specificare i selettori.

ora ti spiego, invece del <ul class="sotto1menu">[/list]io ci ho messo un elemento <menu></menu> per fare il sottomenu, invece secondo quello che dici tu sarebbe meglio che definissi nei css questo

ul
{
  ..
}
ul.sotto1menu
{
  ..
}

per poi utilizzare la struttura da te postata, giusto?