具有 100% 宽度分隔线的 CSS Accordion /树菜单

Question

我想用 HTML 创建一个 CSS/JS Accordion 菜单，如下所示:

<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>

导航结构可以达到 N 级深度，每个子菜单将从其父菜单缩进。我希望在所有导航元素(包括第 n 级子元素)之间有一个跨越 100% 宽度的边框。像这样:

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

如果不使用 JavaScript，我一辈子都想不出一种简单的方法来做到这一点，但感觉应该是可行的。 (我将使用 JS 来展开/折叠导航树)。

Answer 1

您需要在 <a> 上添加边框和内边距这也必须设置为 display:block .这给了额外的好处，因为它使整个 <li>区域可点击。

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

Example here

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>