Building a very specific menu with JQuery

I have an HTML table defined as follows:

  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td class="item1a">&nbsp;</td>
      <td class="item2a">&nbsp;</td>
      <td class="item3a">&nbsp;</td>
      <td class="item4a">&nbsp;</td>
      <td class="item5a">&nbsp;</td>
      <td class="item6a">&nbsp;</td>
      <td>Some addition content that is not a menu</td>
    </tr>
  </table>             

Each cell has it's own item because the content and width such content varies. For instance, here is the CSS associated with item1a

.item1a {height:36px; width:84px; background-image:url(/resources/images/item1a.pn开发者_开发知识库g);}
.item1b {height:36px; width:84px; background-image:url(/resources/images/item1b.png);}

When someone hovers over a cell, I need to change the class from a to b. I am pretty confident I know how to do that. My real problem is, I don't know how to make a menu popup underneath the item. I need to use this tabular structure because of the specificty of the graphics. Can someone help me out? How should I address this problem?

Thank you!

Assuming your classes item1a, item2a... are typos and you meant to type item1 a

$('td').hover(hoverIn, hoverOut); //make your more selector more specific 

function hoverIn() {
  $this = $(this);
  $this.removeClass('a').addClass('b');
  var hoverMenu = '<div class="hoverMenu">Rest of the HTML needed for the menu</div>';
  $this.append(hoverMenu);
}

function hoverOut() {
  $this = $(this);
  $this.removeClass('b').addClass('a');
  $this.children('.hoverMenu').remove();
}

Switches the classes on hover and adds a DIV to the TD bottom. You can move it around to suit your needs.