Absolute :after displaying differently in firefox and webkit

Question

I've got a fancy drop down menu on my site at: http://www.blueleafstudio.net/environmentally-friendly-web-hosting/ (try the "about" or "support" menu items at the top)

I've got my desired behaviour on webkit browsers but firefox isn't doing the same thing.

On hover, an li:after element is shown. It has position absolute. The li element itself has position relative.

In webkit, the :after element position is relative to the li but in firefox it's position is relative to the ul tag.

Can anyone see a way round this while keeping the menu the same visually?

Answer 1

There is a smilar issue listed here: Does Firefox support position: relative on table elements?

Basically, this is an issue with Firefox support for relative positioning on table cells, or in your case and element set to display:table-cell;. The solution they propose in that example is to add a relatively posiitoned wrapper element inside the 'cell'.

<li>
    <div style="position:relative;">
        <a href="">{..}</a>
        <ul>{...}</ul>
    </div>
</li>