overflow - 固定高さのメニューから純粋な CSS サブメニューを作成することは可能ですか?

Question

そのアイテムの右側にサブメニューが表示されるいくつかのアイテムを含む垂直メニューがあります。これはほとんど問題なく動作していますが、メイン メニューには非常に多くの項目が含まれている可能性があるため、垂直スクロールバーを使用して最大高さを設定したいと考えています。

問題は、メイン メニューで 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 メニューを失い、セマンティックではなくなります。必要に応じてそれを受け入れることができますが、可能であればより良い解決策を見つけたいと思います.