Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Chrome CSS Drop Down Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--<link rel="stylesheet" type="text/css" href="chrometheme/chromestyle.css" />-->
<script type="text/javascript" src="chromejs/chrome.js">
/***********************************************
* Chrome CSS Drop Down Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
</head>
<style type="text/css">
body {
background:#FFFFFF;
width:100%
heigth:100%;
margin:0;
}
#degradado
{
width: 100%;
min-height:900px;
background: url(gradienteazul.jpg) repeat-y scroll 0;
margin:1;
}
#frame1
{
width: 100%;
min-height:900px;
background: url(EsTxt.png) repeat-x scroll 0;
margin:1;
}
ul li a
{
list-style-type: square;
margin:0px;
padding:0px;
background: #CCEEFF;
border: 1px solid #0040FF;
}
#dropmenu1
{
float:left;
width:110px;
height:90px;
margin:5px;
}
#dropmenu2
{
float:left;
width:110px;
height:90px;
margin:2px;
}
#dropmenu3
{
float:left;
width:110px;
height:90px;
margin:2px;
}
#dropmenu4
{
float:left;
width:110px;
height:90px;
margin:2px;
}
/*
div.title {
width: 90%;
color: #072B4B;
background: transparent none;
margin-left: auto;
margin-right: auto;
margin-top: 0;
}
div.title h1 {
margin-top:0;
padding:10px;
font-size:20px;
}
div.contenido {
width:90%;
background: #FFFFFF;
border: 2px solid #072B4B;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}*/
</style>
<body>
<script type="text/javascript">
function mostrar(nombreCapa)
{
nombreCapa=nombreCapa;
document.getElementById(nombreCapa).style.display="block";
}
function cerrar(nombreCapa) {
nombreCapa=nombreCapa;
document.getElementById(nombreCapa).style.display="none";
}
function evalua(nombreCapa,chk)
{
nombreCapa=nombreCapa;
if (document.getElementById(nombreCapa).style.display == "none") {
mostrar(nombreCapa);
}else{
cerrar(nombreCapa);
}
}
</script>
<div id="menu">
<img src="Menu.png" usemap="#menu" class="chromestyle" id="chromemenu">
<map name="menu">
<area id="Area1" onclick = "evalua('dropmenu1')" shape="rect" coords="50,50,120,80" alt="Nosotros" target="frame" />
<!--1st drop down menu -->
<div id="dropmenu1" style="display:none">
<ul>
<li><a href="mision.htm" >Misiòn</a></li>
<li><a href="vision.htm" >Visiòn</a></li>
</ul>
</div>
<area id="Area2" onclick = "evalua('dropmenu2')" shape="rect" coords="130,50,220,80" alt="Servicios" target="frame" />
<!--2nd drop down menu -->
<div id="dropmenu2" style="display:none" >
<ul>
<li><a href="#" >Sistemas</a></li>
<li><a href="#" >Diseño</a></li>
<li><a href="#" >Eventos</a></li>
<li><a href="#" >Soporte Tecnico</a></li>
</ul>
</div>
<area id="Area3" onclick = "evalua('dropmenu3')" shape="rect" coords="230,50,280,80" alt="Clientes" target="frame" />
<!--3rd drop down menu -->
<div id="dropmenu3" style="display:none" >
<ul>
<li><a href="#">Google</a></li>
<li><a href="#">Yahoo</a></li>
<li><a href="#">MSN</a></li>
</ul>
</div>
<area id="area4" shape="rect" onclick = "evalua('dropmenu4')" coords="290,50,370,80" alt="Productos" target="frame" />
<!--<area shape="rect" coords="400,50,490,80" href="NoInfo.html" alt="Servicios" target="frame"/>
<area shape="rect" coords="490,50,550,80" href="NoInfo.html" alt="Servicios" target="frame"/>
<area shape="rect" coords="580,50,620,80" href="NoInfo.html" alt="Servicios" target="frame"/>-->
<div id="dropmenu4" style="display:none">
<ul>
<li><a href="#">Equipos</a></li>
<li><a href="#">Instalaciones electricas</a></li>
<li><a href="#">Instalaciones computacionales</a></li>
</ul>
</div>
<area id="dropmenu5" shape="rect" coords="640,50,710,80" alt="Contacto" href="contacto.php" />
</map></div>
<iframe id="frame" name="frame" src="inicio.htm" width="100%" height="100%"></iframe>
</body>
</html> Este es el codigo de una pagina que estoy haciendo y quiero saber como puedo hacer le que el menu desplegado en el <div> se encime a la imagen que tengo. No se si alguien tenga alguna idea.