position relative in firefox [duplicate]

Answer 1

Like @Jared Farrish said using tables for layout is bad practice and the problem here.

#mainmenu ul li {
    width: 100%;
}

Is causing the li elements to display 100% of the screen. I would suggest you wrap the menu in a container div, there is absolutely no need for a table here you should put the menu in an unordered list something like: -

<ul>
   <li class="parent_node"> Menu Header 1
        <ul class="sub_node">
             <li> Sub item 1</li>
        </ul>
   </li>
   <li class="parent_node"> Menu Header 2
        <ul class="sub_node">
             <li> Sub item 1</li>
        </ul>
   </li>  
</ul>

Answer 2

position: relative does not work on table cells (<td> or display: table-cell).

From the spec: http://www.w3.org/TR/CSS21/visuren.html#propdef-position

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

So, Firefox is doing nothing wrong, although I do wish it would copy other browsers and make this work.

To make this work, you need to add a wrapper div inside each td (and adjust your CSS selectors):

<table id="mainmenu">
    <tr>
        <td>
            <div style="position: relative;">
                <a href="#">..</a>
                <ul>
                    ..
                </ul>
            </div>
        </td>

        ..
    </tr>
</table>