Adding JQuery menus

I have some existing code. This code uses an html table for a banner. The code looks like this:

<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>

When the user clicks a cell, I need to display some menu items associated with the menu. My problem is I'm not sure how to get this menu structure in place. Because there are a lot of other JQuery components tied to this particular table, I cannot change it to another element without significant work. That rules out the DIV vs Table debate or using a UL menu structure.

Can someone tell me how I can get a list of menu options to be displayed when a user clicks a menu? The other item is, I need the menu items to appear without 开发者_StackOverflow中文版pushing the page content down. In effect, I need the menu items to appear on top of the page content.

Thank you for your help!

---

ok, this might work for you...

working example: http://jsfiddle.net/HDfzt/2/

HTML:

 <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>

CSS:

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

JS:

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

---

Add positioning to the main/sub menus. Hide the children at LOAD, and show on hover/click, etc.

#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
}
});

---

hey, check this site http://www.stunicholls.com/... i've learned a lot from here about jQuery menu and other. and also, i would suggest that you should use

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

hope that helps