是否可以从具有固定高度的菜单中创建纯 CSS 子菜单？答案

【问题标题】：Is it possible to create a pure CSS submenu off a menu with a fixed height?是否可以从具有固定高度的菜单中创建纯 CSS 子菜单？
【发布时间】：2013-04-10 01:21:17
【问题描述】：

我有一个垂直菜单，其中一些项目的右侧有一个子菜单。这大部分工作正常，但主菜单上可能有很多项目，所以我想要一个带有垂直滚动条的最大高度。

问题是如果我在主菜单上设置了overflow:auto，那么子菜单就不能正确显示了，因为它不能溢出主菜单的宽度。

这是我的代码，在http://jsfiddle.net/FK8p6/ 有一个示例。如果您从 .menu 类中删除了 overflow: auto ，那么您可以看到子菜单正常工作，但是当然主菜单不再正确显示了。

HTML：

<ul class="menu">
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
    <li>Menu 5</li>
    <li>
        Menu 6
        <ul class="menu submenu">
            <li>SubMenu 1</li>
            <li>SubMenu 2</li>
            <li>SubMenu 3</li>
        </ul>
    </li>
</ul>

CSS：

.menu
{
    padding: 5px;
    list-style-type: none;
    background-color: #99f;
    max-height: 80px;
    width: 100px;
    overflow: auto;
}

.menu li
{
    border: #ddd 1px solid;
    position: relative;
    line-height: 24px;
    cursor: default;
}

.menu li:hover
{
    background-color: #d1e7ff;
}

.submenu
{
    max-height: none;
    background-color: #fff;
    padding: 0;
    position: absolute;
    top: -1px;
    left: 100%;
    display: none;
}

.menu li:hover .submenu
{
    display: block;
}

我知道我可以将子菜单拉到层次结构中的主菜单之外，然后使用 javascript 来定位它。但后来我失去了纯 CSS 菜单，它也不再是语义的。如果必须，我可以忍受，但如果可能的话，我想找到更好的解决方案。

【问题讨论】：

为什么要限制高度？我不认为没有 js 可以完成你想要的。
@Elezar 如果您有一个实际上将是那个大小的菜单，您是否可以考虑另一种方法，例如许多响应式设计采用的<select> 菜单？从用户体验的角度来看，这几乎是犯罪。
@gSaenz 要么设置高度，要么冒险使菜单高于视口。由于我们应用程序的外框始终与视口大小相同，因此我们要确保没有比这更大的了。 @BG_Insight 你能举一个<select> 菜单的例子吗？我不确定你的意思。

标签： overflow submenu css

【解决方案1】：

你看过这个教程吗？我认为固定高度的导航栏没有任何问题...

http://www.devinrolsen.com/pure-css-horizontal-menu/

天哪 - 垂直菜单？那时这可能无济于事。

【讨论】：