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％

我要求的太多了吗？ ： - ）