我有一个垂直菜单，其中一些项目有一个子菜单出现在该项目的右边。这是大部分工作良好，但主菜单可能有一大堆项目在它，所以我想要一个最大高度与垂直滚动条在它。

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

下面是我的代码，其中有一个示例，网址是http://jsfidle.net/fk8p6/。如果您从.menu类中删除overflow：auto，那么您可以看到子菜单正常工作，但当然主菜单不再正确显示，那么。

<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>

.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;
}

我知道我可以在heirarchy中将子菜单拉到主菜单之外，然后使用javascript来定位它。但是，我失去了纯CSS菜单，它也不再是语义菜单。如果有必要的话，我可以接受，但如果可能的话，我想找到一个更好的解决办法。