problema con css y hover
 

buenas tardes agradezco de ante mano todas sus respuestas y sobre todo a aquellas que puedan darme alguna solucion a mi problema.


les comento.

tengo el mapa de mi dpto en el he insertado una etiqueta <area> que rodea el croquis del mismo.

la idea es que cuando una pesona se posicione encima de esta area me muestre la informacion que tengo dentro de un <ul> osea (display:block;)

hasta el momento llevo lo sig....


en html.


<div>
<p><img src="miimagen.png" border="0" name="mapa" usemap="#Map"/></p>

<map name="Map" id="Map" class="m_mapa">
<area shape="poly" coords= "19,29,6,46,11,65,16,66,24,83,12,98,6,110,3,125,3, 138,3,153,3,158,12,158,19,161,24,163,30,160,40,160 ,54,162,66,143,70,140,71,137,85,136,103,118,108,11 1,126,110,136,92,135,88,126,76,121,73,107,81,102,7 6,94,76,94,62,96,52,99,43,90,23,85,22,72,11,65,14, 63,6,58,2,49,3,39,6,29,11,22,20" href="#" />

<div position:absolute; left: 54px; top: 104px;>
<ul>
<li>ciudad 1</li>
<li>ciudad 2</li>
<li>ciudad 3</li>
<li>ciudad 4</li>
<li>ciudad 5</li>
</ul>

</div>

</map>

</div>


_____________
y en css...

.m_mapa ul{
display:none;
}

.m_mapa li{
position:relative;
width:120px;
border:1px solid #000000;
text-align:left;
padding-left:8px;
background:#FFCC33;
list-style:none;
}

.m_mapa:hover ul{
display:block;
}




es como si el hover no funcionara sobre la etiqueta <area>

un ejemplo de lo que quiero lo encuentran en http://www.nufarm.com/

pasen el codigo sobre el mapa y veran, el codigo de esta pagina ya lo analice y trabajan con javascript pero mi idea es hacerlo solo con css.

espero haberme echo entende mil gracias.

Amigo JAI_ME, te recomiendo que uses las etiquetas para dar formato al código fuente, se verá mucho más claro y fácilmente.
Puedes usar la genérica [code ] tu código fuente [/code ] (sin el espacio que he dejado entre 'code' y el ']') :)
Puedes echar un vistazo a todas aquí.

Hola JAI_ME

Me llama la atención que uses <MAP> como si fuese un contenedor... este es un uso que te puede ocasionar errores de validación o podria no funcionar en otros navegadores.

Hasta donde tengo entendido la propiedad hover podria no funcionar correctamente en este tipo de elementos... y además con CSS no puedes modificar las propiedades de los elementos contenidos en un elmento (excepto las propiedades marcadas como inherited o aquellas especificas como la sublclase first y afines)... entonces necesariamente esto lo deberás hacer con JavaScript.

La visualización de componentes hazla con javascript
 

Maneja con javascript y no con css los eventos onMouseOver y onMouseOut, las funciones que contengan estos eventos deben hacer el display(a 'none' o 'block') sobre tus 'li' o sobre tu 'div'