Comment créer une liste déroulante pour jeux

<table>
<tr>
<td colspan="3" class="menuz"><div id="mainMenu">
<ul id="menuList">
<!-- Menu Option 1 -->
<li class="menubar"> <a class="starter" accesskey="1" href="#">Lien</a>
<!-- Submenu 1 Options -->
<!-- Menu Option 2 -->
</li>
<li class="menubar"> <a class="starter" accesskey="2 "href="#">Lien</a>
<!-- Submenu 1 Options -->
<ul class="menu" id="menu2">
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul>
<!-- Menu Option 3 -->
</li>
<li class="menubar"> <a class="starter3" accesskey="3" href="#">Lien</a>
<!-- Submenu 1 Options -->
<ul class="menu" id="menu3">
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul>
<!-- Menu Option 4 -->
</li>
<li class="menubar"> <a class="starter" accesskey="4" href="#">Lien</a>
<!-- Submenu 1 Options -->
<ul class="menu" id="menu4">
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul>
<!-- Menu Option 5 -->
</li>
<li class="menubar"> <a class="starter" accesskey="5" href="#">Lien</a>
<!-- Submenu 1 Options -->
<ul class="menu" id="menu5" >
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul>
<!-- Menu Option 6 -->
</li>
</ul>
</div></td>
</tr>
</table>

A.starter{
background-image:url(img/button.gif);
background-repeat:no-repeat;
text-align:center;
background-color:transparent;
color: #FFFFFF;
width:73px;
height:21px;
padding-top:5px;
display:block;
float:left;
margin: 0px;
}

A.starter:hover{ background-image:url(img/buttonh.jpg);
background-repeat:no-repeat;
text-align:center;
background-color:transparent;
display: block ;color:#FFFFFF}

A.starter:active{ background-image:url(img/buttonh.jpg);
background-repeat:no-repeat;
text-align:center;
background-color:transparent;
display: block ;color:#FFFFFF}

a.starter3{ background-image:url(img/button2.gif);
background-repeat:no-repeat;
text-align:center;
background-color:transparent;
display: block ;
color: #FFFFFF;width:110px; height:21px;
padding-top:5px;
display: block;
float:left}

a:hover.starter3{ background-image:url(img/button2h.jpg);
background-repeat:no-repeat;
text-align:center;
background-color:transparent;
display: block ;color:#FFFFFF}

.menuz{ background-color:#3431b8; width:0px;}

#mainMenu {
border-top: 1px solid #fff;
text-align: left;
position: relative;
}

#menuList {
padding: 0px;
margin: 0px;

}
#menuList ul {
padding: 0px;
margin: 0px;

}
#menuList li {
display: inline;
list-style-type: none;

}

.menu {
background-repeat:no-repeat;
text-align:center;
background-color:transparent;
color: #FFFFFF;width:145px; height:21px;
padding-top:5px;
position: absolute;
visibility: hidden;
display: block;

}

.menu li a {
background-image:url(img/button2m.gif);
background-repeat:no-repeat;
text-align:left;
background-color:transparent;
color: #FFFFFF;width:145px; height:21px;
display: block;
padding-top:5px;
padding-left:10px;
}

.menu li a:hover {
background-image:url(img/button2hm.jpg);
color:#FFFFFF
}

<script src="http://www.tonsite.com/oola.js" type=text/javascript></script>

var currentMenu = null;
var mytimer = null;
var timerOn = false;
var opera = window.opera ? true : false;

if (!document.getElementById)
document.getElementById = function() { return null; }

function initialiseMenu(menu, starter, root) {
var leftstarter = false;

if (menu == null || starter == null) return;
currentMenu = menu;

starter.onmouseover = function() {
if (currentMenu) {
if (this.parentNode.parentNode!=currentMenu) {
currentMenu.style.visibility = "hidden";


}
if (this.parentNode.parentNode==root) {
tempCurrentMenu = currentMenu
while (tempCurrentMenu.parentNode.parentNode!=root) {
tempCurrentMenu.parentNode.parentNode.style.visibility = "hidden";
tempCurrentMenu = tempCurrentMenu.parentNode.parentNode;
}
}
currentMenu = null;
this.showMenu();
}
}

menu.onmouseover = function() {
if (currentMenu) {
currentMenu = null;
this.showMenu();
}
}

starter.showMenu = function() {
if (!opera) {
if (this.parentNode.parentNode==root) {
menu.style.left = this.offsetLeft + "px";
menu.style.top = this.offsetTop + this.offsetHeight + "px";
}
else {
menu.style.left = this.offsetLeft + this.offsetWidth + "px";
menu.style.top = this.offsetTop + "px";
}
}
else {
if (this.parentNode.parentNode==root) {
menu.style.left = this.offsetLeft + "px";
menu.style.top = this.offsetHeight + "px";
}
else {
menu.style.left = this.offsetWidth + "px";
menu.style.top = this.offsetTop + "px";
}

}
menu.style.visibility = "visible";
currentMenu = menu;
}

starter.onfocus = function() {
starter.onmouseover();
}

menu.onfocus = function() {
}

menu.showMenu = function() {
menu.style.visibility = "visible";
currentMenu = menu;
stopTime();
}

menu.hideMenu = function() {
if (!timerOn) {
mytimer = setInterval("killMenu('" + this.id + "', '" + root.id + "');", 1000);
timerOn = true;
for (var x=0;x<menu.childNodes.length;x++) {
if (menu.childNodes[x].nodeName=="LI") {
if (menu.childNodes[x].getElementsByTagName("UL").length>0) {
menuItem = menu.childNodes[x].getElementsByTagName("UL").item(0);
menuItem.style.visibility = "hidden";
}
}
}
}
}

menu.onmouseout = function(event) {
this.hideMenu();
}

starter.onmouseout = function() {
for (var x=0;x<menu.childNodes.length;x++) {
if (menu.childNodes[x].nodeName=="LI") {
if (menu.childNodes[x].getElementsByTagName("UL").length>0) {
menuItem = menu.childNodes[x].getElementsByTagName("UL").item(0);
menuItem.style.visibility = "hidden";
}
}
}
menu.style.visibility = "hidden";
}
}
function killMenu(menu, root) {
var menu = document.getElementById(menu);
var root = document.getElementById(root);
menu.style.visibility = "hidden";
for (var x=0;x<menu.childNodes.length;x++) {
if (menu.childNodes[x].nodeName=="LI") {
if (menu.childNodes[x].getElementsByTagName("UL").length>0) {
menuItem = menu.childNodes[x].getElementsByTagName("UL").item(0);
menuItem.style.visibility = "hidden";
}
}
}
while (menu.parentNode.parentNode!=root) {
menu.parentNode.parentNode.style.visibility = "hidden";
menu = menu.parentNode.parentNode;
}
stopTime();
}
function stopTime() {
if (mytimer) {
clearInterval(mytimer);
mytimer = null;
timerOn = false;
}
}

window.onload = function() {
var root = document.getElementById("menuList");
getMenus(root, root);
}

function getMenus(elementItem, root) {
var selectedItem;
var menuStarter;
var menuItem;
for (var x=0;x<elementItem.childNodes.length;x++) {
if (elementItem.childNodes[x].nodeName=="LI") {
if (elementItem.childNodes[x].getElementsByTagName("UL").length>0) {
menuStarter = elementItem.childNodes[x].getElementsByTagName("A").item(0);
menuItem = elementItem.childNodes[x].getElementsByTagName("UL").item(0);
getMenus(menuItem, root);
initialiseMenu(menuItem, menuStarter, root);
}
}
}
}