带有100%宽度分隔器的CSS手风琴/树菜单

Question

我想用HTML创建一个CSS/JS手风琴菜单，如下所示：

<ul>
    <li><a href="#">First Link</a>
        <ul>
            <li><a href="#">Child One</a></li>
            <li><a href="#">Child Two</a></li>
        </ul>
    </li>
    <li><a href="#">Second Link</a></li>
    <li><a href="#">Third Link</a></li>
</ul>

nav结构可以得到N个层次，每个子菜单都会从其父菜单缩进。我希望有一个边框，它跨越所有nav元素之间宽度的100%，包括n级子元素。如下所示：

alt文本http://files.getdropbox.com/u/64548/nested-nav.png

我不可能在不使用JavaScript的情况下找到一种简单的方法来完成这一任务，但这感觉应该是可能的。(我将使用JS展开/折叠导航树)。

Answer 1

您需要在<a>上设置边框和填充，这也必须设置为display:block。这提供了额外的奖励，因为它使整个<li>区域可点击。

在ul中不需要额外的标记。只需定义css中子列表的最大数量即可。

这里的例子

a {text-decoration:none;}
ul {width:240px;padding:0;list-style:none;border-top:1px solid #000;}
ul ul, ul ul ul {border-top:0;}
li a {border-bottom:1px solid #000;display:block;padding-left:0px;}
li li a {padding-left:40px;}
li li li a {padding-left:80px;}


<ul>
    <li><a href="#">First Link</a>
        <ul>
            <li><a href="#">Child One</a></li>
            <li><a href="#">Child Two</a>
                <ul>
              <li><a href="#">Child Two One</a></li>
              <li><a href="#">Child Two Two</a></li>
              </ul>
          </li>
        </ul>
    </li>
    <li><a href="#">Second Link</a></li>
    <li><a href="#">Third Link</a></li>
</ul>

Answer 2

分隔器行的贴图背景图像与调整大小没有矛盾(至少不应该，使用正常的CSS渲染器)。