html - 寻找一个完美的下拉菜单 : stretching to full width, 等宽项，纯 CSS。请帮忙解决一个故障

Question

我正在尝试实现具有以下功能的菜单:

• 横向；
• 等宽菜单项；
• 菜单项遍布整个页面宽度(不仅仅是左侧的人群)；
• 动态(css 规则不应依赖于预定义的元素数)；
• 带有垂直对齐元素的下拉第二级；
• 纯 CSS(无 JS!)。

在我看来，这似乎描述了一个完美的菜单。

我几乎成功地使用了漂亮的 display: table-cell; 技术(为简单起见省略了标签):

<ul>
    <li>Menu item</li>
    <li>
        Expandable ↓
        <ul>
            <li>Menu</li>
            <li>Menu item</li>
            <li>Menu item long</li>
        </ul>
    </li>
    <li>Menu item</li>
    <li>Menu item</li>
</ul>

ul {
    display: table;
    table-layout: fixed;
    width: 100%;
}

li {
    display: table-cell;
    text-align: center;    
}

li:nth-child(even){
    background-color: lightblue;    
}

li:nth-child(odd){
    background-color: lightskyblue;    
}

li ul { display: none; }

li:hover ul {
    display: block;
    position: absolute;
}

li:hover ul li {
    display: block;
}

唯一的问题是子菜单项显示为整页宽度并且部分显示在浏览器窗口之外，从而强制显示水平滚动条:

啊! StackOverflow 不允许我发布图片。在 JSFiddle 上进行实时测试:http://jsfiddle.net/6PTpd/9/

我可以通过添加 float: left; 来解决这个问题clear: both; 到 li:hover ul li。但是当我这样做时，子菜单项具有不同的宽度:

fiddle :http://jsfiddle.net/6PTpd/10/

...或宽度 width: 15%;: http://jsfiddle.net/6PTpd/12/

这两个修复都很丑陋，既没有解决等宽问题也没有解决水平滚动条问题。

UPD 在复习这篇文章时，我发现了滚动条问题的一些解决方案:将 li:hover ul 宽度设置为 0。但这会强制指定宽度子菜单项的绝对值。 :( 参见 http://jsfiddle.net/6PTpd/13/

此外，当展开最后一个菜单项时，此解决方案可能会很糟糕。根据屏幕宽度，它可能仍会使页面比窗口更宽:http://jsfiddle.net/6PTpd/15/

问题:

1. 如何在不启用水平滚动条的情况下使子菜单项的宽度与其父菜单项的宽度相同？
2. 是否有另一种 CSS 技术允许创建具有帖子开头所述的所有先决条件的菜单？

我找到了很多示例，但它们中的每一个都是非拉伸(stretch)的(将元素 float 到左侧)或非动态的(使用从预定义数量的元素中获取的大小，例如 width: 20 % 用于五个一级元素中的每一个，或者更糟的是，使用绝对尺寸!)。

Answer 1

这不是最好的方法，但这是您的解决方案:http://jsfiddle.net/6PTpd/17/

关于 CSS 的有趣之处在于，即使是大师也总是能发现您可以用它做的新事情。从这方面来说，这是一种了不起的语言。这就是为什么我给了你那个 fiddle ，这样你就可以知道你做错了什么(主要是绝对定位，顺便说一句)。但也有一些您应该注意的漏洞。

那么让我解释一下为什么您可能不应该使用该 JSFiddle 中的代码。第一个问题是它使用了 display: none。这是一个问题，因为屏幕阅读器不会阅读未显示的文本。 (更多信息在这里:http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/)

第二个问题是它在悬停时显示。在触摸屏越来越普遍的世界里，悬停不再是最佳选择。

如果你愿意，你仍然可以使用它，只是认为你应该知道它的缺点。

TL;DR:如果屏幕阅读器和触摸屏支持是个问题，那么我鼓励您搜索其他选项。