Я хочу реализовать складное меню. Я планирую использовать компонент таблицы для имитации меню и вкладывать вложенную таблицу в ячейку таблицы для имитации подменю.
Ниже приведен мой код, он работает как положено в 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 думает, что атрибуты left и top для меню уровня 3 относятся к меню уровня 1, поэтому он неправильно расположил меню уровня 3. Другие браузеры рассчитывают смещение базы в меню уровня 2, которое работает, как и ожидалось.
Это ошибка в Firefox? Если так, как я могу обойти это? Я хочу, чтобы мой код работал одинаково во всех основных браузерах.