brauche coolmenü! Bitte um Hilfe!

<style type="text/css">
<!--

/* keine Auflistungspunkte vor Navi-Links */
   ul, li {
      list-style-type: none;
      padding: 0px;
      margin: 0px;
   }

/* Abstand zwischen Schrift zum Rand */
   li a {
      padding-right: 20px;
      padding-top: 5px;
      font-family: Verdana, sans-serif;
      font-size: 14px;
   }

/* Coolmenue positionieren*/
   div.menu {
      z-index: 300;
      
      /*Wenn man das Coolmenue frei positionieren moechte, die folgenden "/*" und "* /" entfernen. Dann die Werte bei "top" und "left" anpassen.*/
      
      /*position:absolute;
      top:300px;
      left:50%;*/
   }

/* Aussehen der Menuepunkte einstellen */
   .menu a {
      border: none;
      background-color: #55C71C;
      background-image: url(http://http://dandiemer.com/wallpaper/homer_ipod_final.jpg);
      text-decoration: none;
      text-align: center;
      font-weight: bold;
      cursor: pointer;
      margin: 0px;
      display: block;
      height: px;
      color: #FFFFFF;
   }

/* Aussehen der Menuepunkte beim Hover Effekt */
   .menu a:hover {
      background-color: #2AFF12;
      background-image: url(http://http://dandiemer.com/wallpaper/homer_ipod_final.jpg);
      color: #FFFFFF;
   }

/* Breite der Menuepunkte einstellen */
   .menu li {
      width: 250px;
      float: left;
      overflow:hidden;
   }

   .submenue {
      font-size: 14px;
      display: none;
      width: 250px;
      float: left;
   }

   .submenue a {
      font-weight: bold;
      padding-top: 5px;
      cursor: pointer;
       color: #FFFFFF;
       background-color: #55C71C;
      background-image: url(http://http://dandiemer.com/wallpaper/homer_ipod_final.jpg);
   }

   .submenue a:hover {
   color: #FFFFFF;
   background-color: #55C71C;
    background-image: url(http://http://dandiemer.com/wallpaper/homer_ipod_final.jpg);
   }
//-->
</style>
<script type="text/javascript">
<!--
function cool(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}
function coolout(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>
<div class="menu">
<li><a href="javascript:void(0);" onmouseover="cool('submenu0');" onmouseout="coolout('submenu0');">                          Home</a>
<ul class="submenue" id="submenu0" onmouseover="cool('submenu0');" onmouseout="coolout('submenu0');">
    <li><a target="_self" href="http://foxday.de.tl/Kontakt.htm">Kontakt</a></li>
<li><a target="_self" href="http://foxday.de.tl/Newsletter.htm">Newsletter</a></li>
<li><a target="_self" href="http://foxday.de.tl/Login.htm">Login</a></li>
<li><a target="_self" href="http://foxday.de.tl/G.ae.stebuch.htm">Gästebuch</a></li>
<li><a target="_self" href="http://foxday.de.tl/Umfrage.htm">Umfrage</a></li>
</ul></li>
<li><a href="javascript:void(0);" onmouseover="cool('submenu1');" onmouseout="coolout('submenu1');">foxday</a>
<ul class="submenue" id="submenu1" onmouseover="cool('submenu1');" onmouseout="coolout('submenu1');">
    <li><a target="_self" href="http://foxday.de.tl/Downloads.htm">Download</a></li>
<li><a target="_self" href="http://foxday.de.tl/Bilder/index.htm">Bilder</a></li>
</ul></li>
<li><a href="javascript:void(0);" onmouseover="cool('submenu2');" onmouseout="coolout('submenu2');">fun</a>
<ul class="submenue" id="submenu2" onmouseover="cool('submenu2');" onmouseout="coolout('submenu2');">
    <li><a target="_self" href="http://foxday.de.tl/Gedankenlesetest.htm">Gedankenlesetest</a></li>
<li><a target="_self" href="http://foxday.de.tl/MagicNumber.htm">Magicnumber</a></li>
<li><a target="_self" href="http://foxday.de.tl/FakePhone.htm">FakePhone</a></li>
<li><a target="_self" href="http://foxday.de.tl/Witze.htm">Witze</a></li>
<li><a target="_self" href="http://foxday.de.tl/Games.htm">Games</a></li>
</ul></li>
</div>

<style type="text/css" media="screen">
<!--
body
{
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
padding: 10px;
margin: 0px;
}

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

li a
{
padding-right: 20px;padding-top: 5px;
}

div.menu
{
position: absolute;
z-index: 3;
top: 124px; <- hier kannst du den Abstand von oben einstellen
left: 50%;
margin-left:-405px;  <- und hier den Abstand von Links
width:905px;
}

.menu li
{
width: 160px;
float: left;
}

.menu a
{
border: 0px solid #000000;
background-color: #000000;
background-image: url(URL);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 23px;
color: #00CCFF;
}

.menu a:hover
{
background-color: #00CCFF;
background-image: url(URL);
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{
font-size: 14px;
display: none;
width: 160px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #FFFFFF;
}
//-->

</style>

<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>
<div class="menu">
<li><a href="LINK1"> TITEL1</a> </li>
<li><a onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" href="javascript:void(0);"> TITEL2</a>
<ul onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" id="smenu2">
<li><a href="UNTERLINK2.3">Titel</a></li>
<li><a href="UNTERLINK2.3">Titel</a></li>
<li><a href="UNTERLINK2.4">Titel</a></li>
<li><a href="UNTERLINK2.5">Titel</a></li>
<li><a href="UNTERLINK2.6">Titel</a></li>
<li><a href="UNTERLINK2.7">Titel</a></li>
<li><a href="UNTERLINK2.8">Titel</a></li>
<li><a href="UNTERLINK2.9">Titel</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" href="javascript:void(0);"> TITEL3</a>
<ul onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" id="smenu3">
<li><a href="UNTERLINK3.2">Titel</a></li>
<li><a href="UNTERLINK3.3">Titel</a></li>
<li><a href="UNTERLINK3.4">Titel</a></li>
<li> </li>
</ul>
</li>
<li><a href="LINK4"> TITEL4</a></li>
<li><a onmouseout="cache('smenu5');" onmouseover="montre('smenu5');" href="javascript:void(0);"> TITEL5</a>
<ul onmouseout="cache('smenu5');" onmouseover="montre('smenu5');" id="smenu5">
<li><a href="LINK5.1">Titel</a></li>
<li><a href="LINK5.2">Titel</a></li>
</ul>
</li>
</div>