Menù (verticali / orizzontali)

[merlinox]

Io ho applicato questo CSS:
#main #menuTop{
}
#main #menuTop ul{
list-style: none;
margin: 0px;
padding: 0px;
}
#main #menuTop li{
float: left;
margin: 0px;
padding: 0px;
border-right: 2px solid white;
border-bottom: 2px solid white;
}
#main #menuTop li a{
display: block;
padding: 5px 10px 5px 5px;
margin: 0;
background-color: #0850A0;
color: white;
text-decoration: none;
}
#main #menuTop li a:hover, #main #menuTop li a:active{
background-color: #F36000;
color: white;
}

Ecco il codice html
<ul>[*]link1[*]link2[*]link3[/list]

Il menù si vede perfetto, ma mi da cliccabile solo la parte dei bottoni in cui c'è del testo [DOM: XHTML Strict]
Dove sbaglio?

Esempio: http://www.merlinox.com/MrX/testCssMenu.html

[thomas_anderson]

ciao!
allora,[*] per default è 'display: list-item'. puoi impostarlo a block, se vuoi, ma il mio consiglio è quello di usare la seguente dichiarazione per IE:

* html body #main #menuTop li {display:inline;}

per ovviare a un bug di IE5. per il resto devi fare in modo che l'area di[*] ed <a> combacino, ossia devi applicare una width ad <a>.

+ un pò di padding

[merlinox]

per il resto devi fare in modo che l'area di[*] ed <a> combacino, ossia devi applicare una width ad <a>.

+ un pò di padding

Era proprio quello che volevo evitare.
Volevo che i bottoni si adattassero al testo + il padding.

E che tutta l'area del bottone fosse cliccabile.

[thomas_anderson]

se dai il float devi applicare una width. altrimenti puoi allineare tutto usando 'display:inline ' per[*].

[merlinox]

thomas_anderson sei fantastico!
grazie!

#main #menuTop li{
/*float: left;*/
margin: 0px;
padding: 0px;

display: inline;
}
#main #menuTop li a{
display: block;
padding: 5px 10px 5px 5px;
float: left;

background-color: #0850A0;
border-right: 2px solid white;
color: white;
text-decoration: none;
}