JavaScript / Horizontales DHTML-Menü[IE|M1.5|O]

<style type="text/css">
.bereich{
display: block;
color: #FFFFFF;
background-color: #000000;
text-align: center;
}

a.link{
display: block;
color: #FFD700;
font-family: Verdana, Arial;
font-size: 13px;
text-decoration: None;
border-bottom: solid 1px #FFFFFF;
}

a.link.bereich{
display: block;
background-color: #000000;
width: 100px;
height: 25px;

}

a.link:hover{
display: block;
color: #000000;
background-color: #FFD700;
}
</style>

<script type='text/javascript'>
 function anzeigen(das){
 if(document.getElementById(das).style.display=='none') 
 document.getElementById(das).style.display='block'; 
 else document.getElementById(das).style.display='none';}
 </script>

<table cellPadding=0 cellSpacing=0 style="position: absolute; top: 10px; left: 150px;">
<tr>
<td valign=top>
<div class="bereich" onMouseover="anzeigen('menue#1')" onMouseout="anzeigen('menue#1')">
<img src="bild1.gif" width=100 height=25>
<span id="menue#1" style="display: none;">
<a href="" class="link">Demolink</a>
<a href="" class="link">Demolink</a>
<a href="" class="link">Demolink</a>
<a href="" class="link">Demolink</a>
</span>
</div>
</td>
<td valign=top>
<div class="bereich" onMouseover="anzeigen('menue#2')" onMouseout="anzeigen('menue#2')">
<img src="bild2.gif" width=100 height=25>
<span id="menue#2" style="display: none;">
<a href="" class="link">Demolink</a>
<a href="" class="link">Demolink</a>
<a href="" class="link">Demolink</a>
</span>
</div>
</td>
<td valign=top>
<div class="bereich" onMouseover="anzeigen('menue#3')" onMouseout="anzeigen('menue#3')">
<img src="bild3.gif" width=100 height=25>
<span id="menue#3" style="display: none;">
<a href="" class="link">Demolink</a>
<a href="" class="link">Demolink</a>
</span>
</div>
</td>
</tr>
</table>