Display:table-cell breaks child element width in Firefox

Question

This is a re-ask of my previous question , with more information based on further experiments and research.

Here is a model that works in IE, Safari and Chrome, and fails in Firefox 22.

I have a drop-down navigation of the following properties:

• Top-level elements of varying widths & heights
• Top-level elements vertically aligned using display:table, display:table-row and display:table-cell to ensure that sub-menus always appear at the same level.
• Sub-menus appear within a UL that is the same width as the parent li, with a wider child-element positioned inside.

The problem: display:table-cell removes the sub-menu's awareness of the top-level LI's width, in Firefox only. It works in every single other browser I have tried it in (except IE7, where it breaks in a way that is acceptable).

Removing display:table-cell fixes the issue, but brings back an earlier issue where the sub-menus appear at different heights when their parents are different heights.

I am looking for either:

• A different way to ensure equal heights on the top-level LIs
• A way to force Firefox to assign the correct width to the sub-menu
• A Z-Index fix forcing the sub-menu to appear behind the main horizontal menu bar, so that the case of the sub-menus appearing at different heights is less ugly.

Help and suggestions greatly appreciated.

HTML

<div id="topnavblock">
    <ul id="topnav">   
        <li><a href="#">Here is a top-level menu item</a>
            <ul>
                <ul class="navwrap3">
                    <li class="navwrap1">
                        <ul class="navwrap2">
                            <li><a href="#">Menu item 1</a></li>
                            <ul>
                                <li><a href="#">Sub-menu 2</a></li>
                                <li><a href="#">Sub-menu 2</a>
                                    <ul>
                                        <li>Third level nested menu</li>
                                    </ul>
                                </li>
                                <li><a href="#">Sub-menu 2</a></li>
                            </ul>
                            </li>
                            <li><a href="#">Sub-menu 3</a></li>
                        </ul><!--end navwrap2-->
                    </li> <!--end navwrap1-->
                </ul><!--end navwrap3-->
            </ul>  
        </li>
        <li><a href="#">Here is a top-level menu item</a></li>
    </ul>
</div>

CSS

#topnavblock {
    width:100%;
    position:relative;
    display:table;
}

#topnav {
    display:table-row;
}

#topnav > li {
    max-width:100px;
    display:table-cell;
    vertical-align: middle;
    border-right: 1px solid yellow;
}

ul#topnav li .navwrap1 {
    background: yellow;
    width: 210px;
    position: relative;
}

ul#topnav li .navwrap2 {
    background:grey;
}

ul#topnav > li > ul {
    border-right: 3px solid red;     
}

ul#topnav ul .navwrap3 {
    border-left:3px solid green;
    padding-top:60px;
}

ul#topnav .navwrap2 li {
    float: none;
    background:lightgreen;
    width:100%;
}

ul#topnav li:hover ul {
    visibility: visible;
}

Answer 1

<li><a href="#">Menu item 1</a></li>行不应以</li>标记结尾。