<head>
<style type="text/css">
.bereich {
display: block;
color: #FFFFFF;
background-color: #000000;
text-align: center;
width: 100px;
}
.untermenu {
display: none;
color: #FFFFFF;
background-color: #000000;
text-align: center;
position: relative;
}
a {
display: block;
color: #FFD700;
font-family: Verdana, Arial;
font-size: 13px;
border-bottom: solid 1px #FFFFFF;
text-decoration:none;
}
a:hover{
display: block;
color: #000000;
background-color: #FFD700;
}
</style>
<script type="text/javascript">
var obj;
function anzeigen(das) {
ausblenden();
obj=document.getElementById("menue#"+das);
obj.style.display="block";
}
function ausblenden() {
for(var i=1;i<6;i++) {
obj=document.getElementById("menue#"+i);
obj.style.display="none";
}
}
</script>
</head>
<body onClick="ausblenden()" onScroll="ausblenden()">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">
<div class="bereich" onMouseover="anzeigen(1)">
<a href="home.html">Home</a>
</div>
<div class="bereich" onMouseover="anzeigen(2)">
<a href="Chat/index.php">Chat</a>
</div>
<div class="bereich" onMouseover="anzeigen(3)">
<a href="Forum/index.php">Forum</a>
</div>
<div class="bereich" onMouseover="anzeigen(4)">
<a href="Gästebuch/guestbook.php">Gästebuch</a>
</div>
<div class="bereich" onMouseover="anzeigen(5)">
<a href="ich.html">Über Mich</a>
</div>
</td>
<td style="vertical-align:top;width:100px">
<!-- In den einzelnen div's braucht nichts zu stehen! -->
<div id="menue#1" class="untermenu" style="top:0px">
</div>
<div id="menue#2" class="untermenu" style="top:17px">
</div>
<div id="menue#3" class="untermenu" style="top:34px">
</div>
<div id="menue#4" class="untermenu" style="top:51px">
</div>
<div id="menue#5" class="untermenu" style="top:68px">
<a href="ich.html">Ich</a>
<a href="hobbys.html">Hobbys</a>
</div>
</td>
</tr>
</table>
</body>
