1

这是对我之前的问题的重新提问，更多信息基于进一步的实验和研究。

这是一个适用于 IE、Safari 和 Chrome 的模型，但在 Firefox 22 中失败。

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

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

问题： 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;
}
4

1 回答 1

0

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

于 2014-04-08T12:27:51.537 回答