添加JQuery菜单

我有一些现有的代码。此代码使用html表作为横幅。代码如下所示：

<table id="banner" cellpadding="0" cellspacing="0" style="width:840px;">
  <tr>
    <td id="menu1" class="menu1">&nbsp;</td>
    <td id="menu2" class="menu2">&nbsp;</td>
    <td id="menu3" class="menu3">&nbsp;</td>
    <td id="menu4" class="menu4">&nbsp;</td>
    <td id="menu5" class="menu5">&nbsp;</td>
  </tr>
</table>

<div>My page content</div>

当用户单击单元格时，我需要显示一些与菜单关联的菜单项。我的问题是，我不知道如何使这个菜单结构到位。因为有很多其他JQuery组件与这个特定的表相关联，所以我不能在不做大量工作的情况下将它更改为另一个元素。这就排除了DIV与Table的争论，或者使用UL菜单结构

有人能告诉我，当用户单击菜单时，如何获得要显示的菜单选项列表？另一项是，我需要菜单项在不向下推页面内容的情况下显示。实际上，我需要菜单项出现在页面内容的顶部

---

谢谢你的帮助

将定位添加到主/子菜单。在加载时隐藏子对象，并在悬停/单击时显示，等等

#menu1, #menu2 { position:relative...}
#sub1, #sub2 { position:absolute, display:hidden...}

$('#menu1').hover(function() {
    $('#sub1').fadeIn().css('top','xxx'); //show the sub, and position it
} function() {
    $('#sub1').fadeOut().css('top','xxx'); //hide it again
}
});

嘿，看看这个网站。。。 我从这里学到了很多关于jQuery菜单和其他功能的知识。而且，我建议你应该使用

    `<ul>
        <li><a href="..">menu1</a></li>
        <li><a href="..">menu2</a></li>
        ...
    </ul>`

---

希望这对你有帮助好的，这可能对你有用

工作示例：

HTML:

JS:

为什么，你为什么要用这样的桌子？

 <table id="banner" cellpadding="0" cellspacing="0" style="width:840px;">
  <tr>
      <td id="menu1" class="menu1">menu1<div><ul class='menu1DropDown'><li>item</li><li>item</li></ul></div></td>
    <td id="menu2" class="menu2">menu2<div><ul class='menu2DropDown'><li>item</li><li>item</li></ul></div></td>
    <td id="menu3" class="menu3">&nbsp;</td>
    <td id="menu4" class="menu4">&nbsp;</td>
    <td id="menu5" class="menu5">&nbsp;</td>
  </tr>
</table>

<div>My page content</div>

#banner div {position: relative}
.menu1DropDown {display: none;}
.menu2DropDown {display: none;}

$("#banner td").hover(function(){
    $("ul", this).toggle("show");
    $("ul", this).css("position","absolute").css("top","0px").css("left","0px");
});