我想实现一个可折叠的菜单.我计划使用表组件来模拟菜单,并将子表嵌套到表格单元格中以模拟子菜单.
下面是我的代码,它在IE,Chrome和Safari中按预期工作,但它在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>
似乎Firefox认为3级菜单的"left"和"top"属性是相对于1级菜单的,所以它错误地布置了3级菜单.其他浏览器将在2级菜单上计算偏移量,这可以按预期工作.
这是Firefox中的错误吗？如果是这样,我该如何解决呢？我希望我的代码在所有主流浏览器中都具有相同的行为.