Table Cell Drop down menu anchored to the right of cell

Question

I have a basic table with a div contained in it that I bring out of the cell "position: absolute" and it comes up nicely below the table cell starting at the left of the cell and flowing to the right.

I want to be able to do this backwards with the last cell (that is have the submenu table anchor itself to the right of the cell(or essentially the table)

I've got this working in FireFox, (bit mess) but it doesn't work in IE.

The Html is as follows

<table style="background-color: gold;" border="1" bordercolor="orange"  cellspacing="0">
 <tr>
  <th>Parent Cell 1
  <div style="position: absolute;  background-color: green; color: white;">
   supercalifragilisticexpialidocious
  </div>
  </th>
  <th>Parent Cell 2
  </th>
  <th>Parent Cell 3
  </th>
  <th>Parent Cell 4
  </th>
  <th>Parent Cell 5
   <div style="float:right; ">
    <div style="position:absolute;">
     <div style="position: absolute; right: 0px; background-color: green; color: white;">
      supercalifragilisticexpialidocious
     </div>
    </div>
   </div>
  </th>
 </tr>
</table>

Does anyone know how I could get the the rightmost submenu item (in a sense) to drop down to the same level as the left one. As I said this (simplified version) works in FireFox, just not in IE and I need it to work in both... :S

I also don't know if the rightmost cell is structured in the most appropriate way or whether there is a better way!

Thanks

Answer 1

Ok, from what I gather this is basically what you want, except I've done it using semantic markup and CSS.

The Markup

<ul id="nav">
    <li>
     <a href="#">Parent 1</a>
     <ul>
      <li><a href="#">Child Item 1</a></li>
      <li><a href="#">Child Item 2</a></li>
      <li><a href="#">Child Item 3</a></li>
      <li><a href="#">Child Item 4</a></li>
     </ul>
    </li>
    <li><a href="#">Parent 2</a></li>
    <li>
     <a href="#">Parent 3</a>
     <ul>
      <li><a href="#">Child Item 1</a></li>
      <li><a href="#">Child Item 2</a></li>
      <li><a href="#">Child Item 3</a></li>
      <li><a href="#">Child Item 4</a></li>
     </ul>
    </li>
</ul>

The CSS

#nav {
    margin: 0;
    padding: 0;
    list-style: none;
    height: 20px;
}
#nav li {
    border: 1px solid #ccc;
    width: 150px;
    height: 20px;
    float: left;
    position: relative;
    background: #eee;
}
#nav ul {
    margin: 0;
    padding: 0;
    width: 130px;
    position: absolute;
    top: 21px;
    left: 0;
    list-style: none;
    display: none;
}
#nav li:hover ul {
    display: block;
}
#nav ul li {
    width: auto;
    float: none;
}

If you want the child lists anchored to the right then you would change the CSS declaration under #nav ul that reads left: 0; to read right: 0; instead.

This will work in IE7+. For IE6 you will need to use a script based solution to get the hover going, such as whatever:hover, or write your own if that's too heavy-handed for your liking.