html - CSS3: ネストされたリストを列として

Question

次のようなHTMLがあります。

<nav class="subnav">
    <ul>
        <li><a href="">Level 1</a></li>
        <li><a href="">Level 1</a></li>
        <li>
            <a href="">Level 1</a>
            <ul>
                <li>
                    <a href="">Level 2</a>
                    <ul>
                        <li><a href="">Level 3</a></li>
                        <li><a href="">Level 3</a></li>
                        <li><a href="">Level 3</a></li>
                    </ul>
                </li>
                <li><a href="">Level 2</a></li>
                <li><a href="">Level 2</a></li>
            </ul>
        </li>
        <li><a href="">Level 1</a></li>
        <li><a href="">Level 1</a></li>
    </ul>
</nav>

私は基本的に、CSS3 でスタイルを設定して、各サブレベルが右側の個別の列として表示されるようにする簡単な方法を探しています (挿入してインデントするのではなく)。このようなもの：

Level 1    |    Level2    >    Level3
Level 1    |    Level2    |    Level3
Level 1    >    Level2    |    Level3
Level 1    |              |
Level 1    |              |

理想的には、これらの列には次のプロパティも必要です。

• 柔軟な幅なので、他のコンテンツをこの横に置くことができます。左に配置/フローティングする必要があります
• 任意のレベルのネスト、および各レベル内の任意の数のエントリ
• 新しいレベルで展開され、個別にスタイルを設定できる共通のラッパー
• 各列はラッパーの高さの 100% を取る必要があります

求めすぎですか？:-)