Ho usato i CSS:

#menu1 {
position: absolute;
left:0px;
top: 1px;
}
.........

.menu {
position: relative;
cursorointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#8b0000;
z-index:999;
text-decoration: none;
}

.menu a {
position:relative;
cursorointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#8b0000;
z-index:999;
text-decoration: none;
border: 1px solid #e6e6fa
}

.menu a:hover {
border: solid 1px #6100c1;
background-color:#f0e1ff;
text-decoration: none;
color: Black;

}

.sub {
position:relative;
width:110px;
background-color:#f0f8ff;
border: 1px solid; border-color: 800000;
visibility:hidden;
cursorointer;
padding:4px;
z-index:999;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
}

.sub a {
color:#000000;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
}

.sub a:hover{
color:#ffffff;
background-color: #6a5acd;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
}

richiamandoli con:

<span id="menu5">
<div class="menu" id="menuTitle5" onmouseover="showFilter('subMenu5','visible')" onmouseout="showHide('subMenu5','hidden')">Euganei</div>
<div class="sub" id="subMenu5" onmouseover="showHide('subMenu5','visible')" onmouseout="showHide('subMenu5','hidden')" style="position: absolute; bottom:14">
Colli

Flora

Percorsi

</div>
</span>