Menu accordéon ( position relative )

Il faut respecter la structure HTML pour l'utilisation du widget accordion de la librairie jQuery UI : 1. Élément de niveau 1 en ligne 2. Élément de niveau n+1 en colonne Contrainte : marche pô

by Guillaume Seguin

HTML

<div id="column-container">
    <a class="first">box 1</a>
    <nav class="first">
        <a>box 1.1</a>
        <a>box 1.2</a>
    </nav>
    <a class="second">box 2</a>
    <nav class="second">
        <a>box 2.1</a>
        <a>box 2.2</a>
        <a>box 2.3</a>
        <a>box 2.4</a>
        <a>box 2.5</a>
    </nav>
    <a class="third">box 3</a>
    <nav class="third">
        <a>box 3.1</a>
        <a>box 3.2</a>
    </nav>
</div>
<br>
<div id="column-container">
    <a>box 1</a>
    <nav>
        <a>box 1.1</a>
        <nav>
            <a>box 1.1.1</a>
                <nav>
                    <a>box 1.1.1.1</a>
                    <a>box 1.1.1.2</a>
                </nav>
            <a>box 1.1.2</a>
        </nav>
        <a>box 1.2</a>
        <nav></nav>
    </nav>
    <a>box 2</a>
    <nav>
        <a>box 2.1</a>
        <a>box 2.2</a>
        <a>box 2.3</a>
    </nav>
    <a>box 3</a>
    <nav>
        <a>box 3.1</a>
        <a>box 3.2</a>
    </nav>
</div>

CSS

div#column-container {
    
}

div#column-container > a {
    background-color: orangered
}

div#column-container > nav {
    display: inline;
    position: relative;
    top: 20px;
}


div#column-container nav a {
    background-color: greenyellow;
}