components/navs.nested.css

index.html

<div class="nav">
    <strong class="nav-name">{{ titre }}</strong>
    <ul class="nav-list nav-list--inline">
        <li class="nav-item">
            <a class="nav-link" href="{{ url }}">{{ lien }}</a>
        </li>
        <li class="nav-item nav-item--withChildren">
            <a class="nav-link" href="{{ url }}">{{ lien }}</a>
            <div class="nav-panel">

                <div class="subnav">
                    <ul class="subnav-list subnav-list--stacked">
                        <li class="subnav-item">
                            <a class="subnav-link" href="{{ url }}">{{ lien }}</a>
                        </li>
                        <li class="subnav-item">
                            <a class="subnav-link" href="{{ url }}">{{ lien }}</a>
                        </li>
                        <li class="subnav-item">
                            <a class="subnav-link" href="{{ url }}">{{ lien }}</a>
                        </li>
                    </ul>
                </div>

            </div>
        </li>
        <li class="nav-item nav-item--withChildren">
            <span class="nav-link nav-link--">{{ lien }}</span>
            <div class="nav-panel">
                {{ contenu }}
            </div>
        </li>
    </ul>
</div>

index2.html

<div class="nav">
    <strong class="nav-name">{{ titre }}</strong>
    <ul class="nav-list nav-list--inline">
        <li class="nav-item">
            <a class="nav-link" href="{{ url }}">{{ lien }}</a>
        </li>
        <li class="nav-item nav-item--withChildren">
            <a class="nav-link" href="{{ url }}">{{ lien }}</a>
            <div class="nav-panel">

                <ul class="nav-sublist nav-sublist--stacked">
                    <li class="nav-subitem">
                        <a class="nav-sublink" href="{{ url }}">{{ lien }}</a>
                    </li>
                    <li class="nav-subitem">
                        <a class="nav-sublink" href="{{ url }}">{{ lien }}</a>
                    </li>
                    <li class="nav-subitem">
                        <a class="nav-sublink" href="{{ url }}">{{ lien }}</a>
                    </li>
                </ul>

            </div>
        </li>
        <li class="nav-item nav-item--withChildren">
            <span class="nav-link nav-link--">{{ lien }}</span>
            <div class="nav-panel">
                {{ contenu }}
            </div>
        </li>
    </ul>
</div>

• http://cssguidelin.es/#html
• http://registry.origami.ft.com/components/o-hierarchical-nav@0.3.4
• http://codeforamerica.clearleft.com/#footer

• --tier1 -> niveau 1
• --tier2 -> niveau 2