无法水平获取导航菜单

Question

每当我尝试使其水平时，我都会得到子菜单重叠。这是代码。当它是垂直的时，它看起来格式正确，所以不确定我在这里做错了什么。任何帮助将不胜感激！

<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

将div 的样式设置为内联：

div {
    display: inline;
}

或者在这种情况下，最好只使用表格：

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

最好是使用 UL/LI 创建菜单

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