✔ Drop down menu

[Samy-Deluxe]

Hallo, ich bin an meinem Menu dran.
Ich werde als nicht fertig.
Also ich wollte ein Dropdown Menu erstellen.
Zuerst wollte ich dass ganze nur mit CSS machen, aber weil das im IE, die hover funktion nur bei a:hover funktioniert, muss ich zu Javascipt greifen.

Ich habe es mit javascipt nicht hin bekommen und schon 2 wochen oder länger dran.
hier is page
Da sind ein par kniflige Sachen dabei.
Deswegen will ich euch fragen ob es jemand diesen script erstellt.
Im Firefox ist alles schon fertig modifiziert.
Ich würde mich freuen wenn jemand diesen CODE für mich mal erstellt, weil ich schon am verzweifeln bin wie es geht.

<--html-->

<div id="navcontainer">
<ul id="navlist">
<li id="head"><a href="#">Main</a>
<ul id="sub">
 <li><a href="index.php?show=news">News</a></li>

              <li><a href="index.php?show=gbook">Guestbook</a></li>
              <li><a href="index.php?show=board">Forum</a></li>
			  <img src="images/bottom.gif">
</ul>


</li>
<li id="head"><a href="#">Clan</a>
<ul id="sub">
			  <li><a href="index.php?show=members">Members</a></li>

              <li><a href="index.php?show=clanwars">Clanwars</a></li>
              <li><a href="index.php?show=awards">Awards</a></li>
              <li><a href="index.php?show=history">History</a></li>
              <li><a href="index.php?show=rules">Rules</a></li>
              <li><a href="index.php?show=sponsors">Sponsors</a></li>
              <li><a href="index.php?show=servers">Servers</a></li>

			 <img src="images/bottom.gif">
</ul>
</li>
<li id="head"><a href="#">service</a>
<ul id="sub">
<li><a href="index.php?show=calender">Events</a></li>
              <li><a href="index.php?show=community">Community</a></li>
              <li><a href="index.php?show=files">Downloads</a></li>
              <li><a href="index.php?show=replays">Replays</a></li>

              <li><a href="index.php?show=links">Links</a></li>
              <li><a href="index.php?show=help">Help</a></li>
			  <img src="images/bottom.gif">
</ul>
</li>
<li id="head"><a href="#">contact</a>
<ul id="sub">
<li><a href="index.php?show=joinus">Joinus</a></li>
              <li><a href="index.php?show=fightus">Fightus</a></li>

              <li><a href="index.php?show=mailus">Mailus</a></li>
              <li><a href="index.php?show=about">About</a></li>
			  <img src="images/bottom.gif">
</ul>
</li>
</ul>
</div>

<--CSS-->

ul#navlist {
 text-align:center;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size:16px;
  }

ul#navlist a
{
font-weight: bold;
text-decoration: none;

 }

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

ul#navlist li {
width:198px;
 background:url(images/li_a.gif);
 }
  ul#navlist li#head{
 height:31px;
 width:198px;
  float: left;
 background:url(images/li.gif)
 }
  ul#navlist li#head:hover{
 height:31px;
 width:198px;
 background:url(images/li_hover.gif)
 }
ul#navlist li a
{
color: #ffffff;

padding: 0px;
}

ul#navlist li a:hover
{
color: #0066ff;
}
ul#navlist li ul#sub li{background:url(images/li_a.gif); font-size:12px;}
ul#navlist li ul#sub{ display: none;  float:none; }

ul#sub li a
{
padding: 0px;
margin: 0px;
}

ul#navlist li:hover ul#sub
{
float:none;
display: block;
position: absolute;
font-size: 8pt;
padding-top: 10px;
}

ul#navlist li:hover ul#sub li a
{
float:none;
display: block;
width: 198;
border: none;
padding: 0px;
}
ul#navlist li:hover ul#sub li a:hover
{
background:url(images/li_a_hover.gif)
}