我有一个垂直菜单，其中一些项目的右侧有一个子菜单。这大部分工作正常，但主菜单上可能有很多项目，所以我想要一个带有垂直滚动条的最大高度。
问题是，如果我在主菜单上设置了溢出：自动，那么子菜单将不再正确显示，因为它不能溢出主菜单的宽度。
这是我的代码，在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 菜单，它也不再是语义的。如果必须，我可以忍受，但如果可能的话，我想找到一个更好的解决方案。