1

我有看起来像这样的 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%

我要求太多了吗？:-)

4

0 回答 0