I want to implement a collapsible menu. I plan to use table component to simulate a menu, and nest a
sub table into a table cell to simulate a
sub menu.
Below is my code, it works as expected in IE, Chrome and Safari, but it doesn't work well in Firefox:
<html>
<body>
<div id="menu" style="position:absolute; left:150px; top:100px; z-index:1">
<table width="200px" height="90" border=1 cellpadding="0" cellspacing="0">
<tr>
<td colspan=2>Money</td>
</tr>
<tr>
<td colspan=2>Tool</td>
</tr>
<tr>
<td>Food
<table style="position:absolute; left:200px; top:60px; z-index:1" width="200px" height="60px" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>Cookie</td>
</tr>
<tr>
<td>Fruit
<table style="position:absolute; left:200px; top:30px; z-index:1" width="200px" height="60px" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>Apple</td>
</tr>
<tr>
<td>Banana</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
It seems that Firefox think the "left" and "top" attribute for the level 3 menu is relative to the level 1 menu, so it layout the level 3 menu incorrectly. Other browsers will calculate the offset base on the level 2 menu, that works as expected.
Is it a bug in Firefox? If so how can I work around it? I want my code to have the same behavior in all major browsers.
