寻找完美的下拉菜单:拉伸到全宽,相等宽度的项目,纯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.但是当我这样做时,子菜单项具有不同的宽度:

小提琴: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技术允许创建一个菜单,其中包含帖子开头描述的所有先决条件？

我发现了很多例子,但每个例子都是非拉伸(浮动项目向左)或非动态(使用从预定数量的项目中获取的尺寸,例如width: 20%,对于五个一级项目中的每一个或更糟糕的是,使用绝对尺寸!).

Answer 1

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

CSS 的有趣之处在于，即使是大师也总是能找到可以用它做的新东西。从这方面来说，这是一门令人惊奇的语言。这就是为什么我给你那个小提琴，这样你就可以了解你做错了什么（这主要是绝对定位，顺便说一句）。但也有一些您应该注意的漏洞。

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

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

如果您愿意，您仍然可以使用它，只是认为您应该了解其缺点。

TL;DR：如果屏幕阅读器和触摸屏支持是一个问题，那么我鼓励您寻找其他选择。