Можно ли создать чистое подменю CSS из меню с фиксированной высотой?

У меня есть вертикальное меню с некоторыми элементами, у которых есть подменю, которое появляется справа от этого элемента. В основном это работает нормально, но в главном меню может быть много элементов, поэтому я хочу, чтобы на нем была максимальная высота с вертикальной полосой прокрутки.

Проблема в том, что если я устанавливаю overflow: auto в главном меню, то подменю больше не отображается правильно, потому что оно не может переполнять ширину основного меню.

Вот мой код с примером на http://jsfiddle.net/FK8p6/. Если вы удалите overflow: auto из класса .menu, вы увидите, что подменю работает правильно, но, конечно, главное меню больше не отображается правильно.

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-меню, и оно также перестает быть семантическим. Я могу жить с этим, если придется, но я хотел бы найти лучшее решение, если это возможно.