[css]Podświetlane menu

Mam taki kod menu, który po najechaniu myszą na link podświetla go:

<STYLE TYPE="text/css">
<!--
#menu p.link
{
 	  margin-top: 0px; 
	  margin-bottom: 0px;
	  text-indent: 20pt;
	  background: url(strzalka.gif) no-repeat;
	  width: 200px;		  
}

#menu p.link:HOVER
{
 	  margin-top: 0px; 
	  margin-bottom: 0px;
	  text-indent: 20pt;
	  background: #000000;
	  width: 200px;		  
}	
-->
</STYLE>

<div id="menu">
<P class="link">&nbsp;&nbsp;&nbsp;<A HREF="link1.html" >link1</A></P>

</div>

ale kod działa tylko na Mozilli 3.1. Na IE nie chce się podświetlać. Co mogę z tym zrobić??

Zaktualizować Internet Explorera do wersji 7. Internet Explorer w wersji 6 nie obsługuje :hover dla czegokolwiek poza .

Możesz też po prostu zrezygnować z p.link:hover i zrobić menu tego typu:

ze stylem CSS w wersji:

ul.menu
{
    list-style-type: none;
}

ul.menu li
{
    /* a tutaj można ustawić margin-left zamiast robić głupie   by zrobić wcięcie */
}

ul.menu li a
{
    /* style dla niepodświetlonego */
}

ul.menu li a:hover
{
    /* style dla podświetlonego */
}

(ogólnie menu na listach jest fajnym pomysłem i łatwo go można ostylować, żeby dobrze wyglądało)

Zrobiłem zamiast akapitu podświetlenie dla linku, w IE jest dobrze, tylko w Firefoxie link jest za mały - widać tylko ten kawałek obrazka, na którym jest tekst. Napisałem tak:

a.link {
	  background: url(strzalka.gif) no-repeat;
	  width:200px;
 }
 
a.link:HOVER {
 background: #000000;
 }

Dodaj zatem padding.

nie działa

Dla elementow nieblokowych szerokosc i wysokosc jest olewana. Sprobuj:

display: block;
width:200px;
float:left;