Salve.
Sto facendo un sito semplice semplice ma ho riscontrato un problema che non avevo mai incrontrato.
Il sito è qui: http://neogpt.altervista.org/Emiltre/

Nel menu vorrei fare in modo che andando col mouse sopra il blocco e non sopra il testo cambi colore anche il testo....

Il mio HTML è questo:
codice:
<div id="page">
	<div id="header">
    	<div id="logo">

[img]img/logo.png[/img]</div>
        <div id="cant"></div>
    </div>
    <div id="menu">
    	<ul>
    		[*]HOME
        	[*]AZIENDA
        	[*]SERVIZI
        	[*]DOVE SIAMO
        	[*]CONTATTI
    	[/list]
    </div>
    <div id="contenuto">
    Contenuto
    </div>
    <div id="footer"></div>
</div>
e il mio css questo:

codice:
#menu {
	background: url(img/menu.png);
	width: 1000px;
	height: 42px;
	text-align: center;
	line-height: 42px;
}

#menu ul li {
	float: left;
	list-style: none;
	width: 150px;
	height: 42px;
}

#menu ul li:hover {
	width: 150px;
	height: 42px;
	background-color: #FFFFFF;
	color: #006;
}

#menu ul li a {
	font-family: Verdana, Geneva, sans-serif;
	color: #FFFFFF;
	text-decoration: none;
}

#menu ul li a:hover {
	font-family: Verdana, Geneva, sans-serif;
	color: #006;
	text-decoration: none;
}

Dove sbaglio o dove bisogna correggere?
Grazie