mmmseguramente deben de haber un montón de script que hagan eso pero ni idea de dónde encontrarlo.
Igual para hacer eso se puede hacer de una forma bastante simple, mira si hacerlo así te sirve
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento sin título</title>
<style type="text/css">
<!--
a
{text-decoration: none;}
.abierto, .cerrado{
width: 110px;
height: 20px;
left: 5px;
z-index: 10;
border-left: 1px solid #c9dbed;
border-right: 1px solid #336699;
border-top: 1px solid #c9dbed;
border-bottom: 1px solid #336699;
background-color: #6c97c4;
font-family: verdana, helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
margin-top: 2px;
padding-left: 20px;
}
.abierto{
background:url(images/opened.gif) no-repeat left top;
}
.cerrado{
background:url(images/closed.gif) no-repeat left top;
}
.submenu
{
width: 108px;
border-left: 1px solid #336699;
border-right: 1px solid #c9dbed;
border-top: 1px solid #336699;
border-bottom: 1px solid #c9dbed;
background-color: #a7c5e2;
font-family: verdana, helvetica, sans-serif;
font-size: 10px;
display: none;
padding-left: 4px;
padding-top: 2px;
padding-bottom: 2px;
margin-left: 10px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #6C97C4;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #000099;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
-->
</style>
</head>
<body>
<script language="JavaScript">
<!--
function abrir(n){
el1 = document.getElementById('submenu' + n)
el2 = document.getElementById('title' + n)
el1.style.display = el1.style.display == 'none' ? 'block' : 'none';
el2.className = el2.className == 'cerrado' ? 'abierto' : 'cerrado';
}
// -->
</script>
<div id="Menu">
<div class="cerrado" id="title1">
<a href="#" onClick="abrir(1); return false">
Buscadores</a>
</div>
<div class="submenu" id="submenu1" style="display: none">
<a href="http://www.google.com.ar/" target="_blank">Google</a><br>
<a href="http://ar.yahoo.com/" target="_blank">Yahoo</a><br>
<a href="http://www.ubbi.com/" target="_blank">Ubbi</a><br>
<a href="http://www.altavista.com/" target="_blank">Altavista</a><br>
<a href="/NautaWeb/buscadores.htm" >mas >>></a>
</div>
<div class="cerrado" id="title2">
<a href="#" onClick="abrir(2); return false">Sitios Oficiales</a>
</div>
<div class="submenu" id="submenu2" style="display: none">
<a href="http://www.laplata.gov.ar" target="_blank">La Plata</a><br>
<a href="http://www.gba.gov.ar" target="_blank">Buenos Aires</a><br>
<a href="http://www.info.gov.ar/" target="_blank">Argentina</a><br>
<a href="/NautaWeb/sitios_oficiales.htm" > mas >>></a>
</div>
</div>
</body>
</html>
las imágenes se incluyen dentro de los css (lo puse en negritas)
mira si así e sirve
