Unable to get my nav menu horizontal

Question

Whenever I try to make it horizontal I get the sub menus overlapping. Here is the code. It looks like it is formatted correctly when it is vertical so not sure what I am doing wrong here. Any help would be appreciated!

<script type="text/javascript">
//<![CDATA[
  function menuItem(text, link)
  {
    this.text = text;
    this.link = link;
  }

  function menuTrigger(name, text)
  {
    this.name = name;
    this.text = text;
  }

  function menu()
  {
   var itemArray = new Array();
   var args = menu.arguments;
   this.name = args[0];
   this.trigger = args[1];
    for(i=2; i<args.length; i++)
    {
     itemArray[i-2] = args[i];
    }
   this.menuItems = itemArray;
   this.write = writeMenu;
   this.position = positionMenu;
  }

  function positionMenu(top,left,width)
  {
  this.top = top;
  this.left = left;
  this.width = width;
  }

  function writeMenu()
  {
  var menuText = '<div id="';
  menuText += this.trigger.name;
  menuText += '" style="top: ';
  menuText += this.top;
  menuText += '; left: ';
  menuText += this.left;
  menuText += ';"';
  menuText += 'onMouseOver="showMenu(\'';
  menuText += this.name;
  menuText += '\')" onMouseOut="hideMenu(menuSelected)">';
  menuText += '<table border="0" width="' +
     this.width + '">';
  menuText += '<tr><th>' + this.trigger.text +
     '<\/th><\/tr><\/table><\/div>';
  menuText += '<div id="';
  menuText += this.name;
  menuText += '" style="top: ';
  menuText += (this.top+23);
  menuText += ';left: ';
  menuText += this.left;
  menuText += ';" ';
  menuText += 'onMouseOver="showMenu(menuSelected)" ';
  menuText += 'onMouseOut="hideMenu(menuSelected)">';
  menuText += '<table border="0" width="' +
    this.width + '">';
  for(i=0; i<this.menuItems.length; i++)
  {
     menuText += '<tr>';
     menuText += '<td onMouseOver="this.style.backgroundColor = \'yellow\'"      
onMouseOut="this.style.backgroundColor = \'\'">';
     menuText += '<a href="' + this.menuItems[i].link + '">';
     menuText += this.menuItems[i].text + '<\/a><\/td>';
     menuText += '<\/tr>';
  }
  menuText += '<\/table><\/div>';
  document.write(menuText);
  document.close();
}

 var menuSelected = '';
 function showMenu(menu)
{
  hideMenu(menuSelected);
  document.getElementById(menu).style.visibility = 'visible';
  menuSelected = menu;
}

function hideMenu(menu)
{
  if(menuSelected!='')
     document.getElementById(menu).style.visibility = 'hidden';
}
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
 body {
background-color: white;
}
/*]]>*/
</style>
</head>

Answer 1

Set your div's style to inline:

div {
    display: inline;
}

Or in this case, could be better to use table only:

<table>
    <tr>
        <td>
            <a href="">Link 1</a>
        </td>
        <td>
            <a href="">Link 2</a>
        </td>
    </tr>
</table>

The best would be to use UL/LI to create menus

<ul>
    <li> <a> Link </a> </li>
    <li> <a> Link </a> </li>
</ul>