html - 显示 :table-cell breaks child element width in Firefox

Question

这是我的previous question的重问，以及基于进一步实验和研究的更多信息。

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

我有以下属性的下拉导航:

• 不同宽度和高度的顶级元素
• 顶级元素使用 display:table、display:table-row 和 display:table-cell 垂直对齐，以确保子菜单始终显示在同一级别。
• 子菜单出现在 UL 中，该 UL 的宽度与父 li 的宽度相同，内部有一个更宽的子元素。

问题: display:table-cell 移除了子菜单对顶级 LI 宽度的感知，仅在 Firefox 中。它适用于我尝试过的所有其他浏览器(IE7 除外，它以可接受的方式中断)。

删除 display:table-cell 解决了这个问题，但又带回了一个较早的问题，即当父项的高度不同时，子菜单显示在不同的高度。

我正在寻找:

• 确保顶级 LI 高度相等的不同方法
• 强制 Firefox 为子菜单分配正确宽度的方法
• Z-Index 修复，强制子菜单出现在主水平菜单栏的后面，这样子菜单出现在不同高度的情况就不那么难看了。

非常感谢帮助和建议。

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> 结尾标签。