Question

这是对previous question的重新询问，其中包含更多基于进一步实验和研究的信息。

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

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

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

问题：显示：table-cell仅在Firefox中删除了子菜单对顶级LI宽度的感知。它适用于我尝试过的每一个其他浏览器（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>标记结尾。

显示：表格单元格在Firefox中打破子元素宽度

1 个答案: