Menu accordéon (position absolute)

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 : Complexité de gestion des autres bloques de la page

by Guillaume Seguin

HTML

<div id="column-container">
    <a class="first">box 1</a>
    <nav>
        <a>box 1.1</a>
        <a>box 1.2</a>
    </nav>
    <a class="second">box 2</a>
    <nav>
        <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>
        <a>box 3.1</a>
        <a>box 3.2</a>
    </nav>
</div>

CSS

div#column-container {
    
}

div#column-container > a {
    background-color: orangered;
    position: absolute;
    top: 0;
}

div#column-container > a.second {
    left: 50px;
}

div#column-container > a.third {
    left: 91px;
}

div#column-container > nav {
    position: absolute;
    top: 21px;
}

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