<style type="text/css">
#boutons-deployables {
    position:relative; /* mettre fixed pour fixer */
    /*z-index:5000;*/ /* facultatif... tout dépend où et comment ce dispositif est installé, mais z-index élevé pour être superposé au reste de la page */
    top:10px; /* position en haut */
    left:10px; /* position à gauche */
}
#boutons-deployables li{ /* Attributs d'une ligne d'un bouton */
    list-style:none;
    height:50px; /* hauteur */
    padding:0px;
    width:50px; /* largeur */
}
#boutons-deployables section{ /* Attributs du bandeau non survolé */
    left:50px; /* position à gauche d'où juxtaposé avec son bouton*/
    padding:0px;
    position:absolute;
    opacity:0; /* opacité = 0 donc non visible */
    transform:scale(0); /* échelle 0 : donc non visible */
    transform-origin:0 0; /* déroulement à partir du haut à gauche */
    transition:all 0.7s ease; /* vitesse et mode de transition ease, linear, ease-in, ease-out...*/
}
#boutons-deployables div{ /* Attributs du div d'un bouton = idem li ci-dessus */
    height:50px; /* hauteur */
    width:50px; /* largeur */
    display:block;
    position:relative;
}
#boutons-deployables div:hover section{ /* Attributs du bandeau survolé */
    position:relative;
    width:650px; /* largeur  en pixels */
    height:auto; /* hauteur : auto donc s'adapte en hauteur au contenu */
    padding:5px; /* marges intérieures du bandeau */
    display:block;
    border-radius:6px; /* arrondis */
    opacity:1; /* opacité = 1 donc visible */
    transform:scale(1); /*échelle 1 : donc visible*/
 }
#boutons-deployables .Item1 { /* Attributs du bouton 1 non survolé */
    background:url('img/NavLat/clock2.png')no-repeat;  /* URL de l'image */
    background-size:48px; /* taille obtenue pour l'affichage, ici 48px*48px */
}
#boutons-deployables .Item1:hover { /* Attributs du bouton 1 survolé */
    background:url('img/NavLat/clock.png')no-repeat; /* URL de l'image */
    background-size:48px; /* taille obtenue pour l'affichage, ici 48px*48px */
}
#boutons-deployables .Item1 section { /* Attributs du bandeau 1 */
background-color:#E1F8FD; /* couleur de fond */
color:inherit; /* couleur du texte */
border:2px solid #0E97B5; /* bordure : épaisseur nature couleur */
}
#boutons-deployables .Item2 { /* idem ci-dessus et compléter les autres items */
    background:url('img/NavLat/layers2.png')no-repeat;
    background-size:48px;
}
#boutons-deployables .Item2:hover {
    background:url('img/NavLat/layers.png')no-repeat;
    background-size:48px;
}
#boutons-deployables .Item2 section {
    background-color:#DEE1E4;
    color:inherit;
    border:2px solid #434951;
}
#boutons-deployables .Item3 {
    background:url('img/NavLat/creditcard2.png')no-repeat;
    background-size:48px;
}
#boutons-deployables .Item3:hover {
    background:url('img/NavLat/creditcard.png')no-repeat;
    background-size:48px;
}
#boutons-deployables .Item3 section {
    background-color:#EEEEEE;
    color:inherit;
    border:2px solid #A0A0A0;
}
#boutons-deployables .Item4 {
    background:url('img/NavLat/settings2.png')no-repeat;
    background-size:48px;
}
#boutons-deployables .Item4:hover {
    background:url('img/NavLat/settings.png')no-repeat;
    background-size:48px;
}
#boutons-deployables .Item4 section {
    background-color:#F5E0E0;
    color:inherit;
    border:2px solid #C53D3D;
}
#boutons-deployables .Item5 {
    background:url('img/NavLat/piechart2.png')no-repeat;
    background-size:48px;
}
#boutons-deployables .Item5:hover {
    background:url('img/NavLat/piechart.png')no-repeat;
    background-size:48px;
}
#boutons-deployables .Item5 section {
    background-color:#E9D9F4;
    color:inherit;
    border:2px solid #762FAC;
}
</style>

<div style="float:left;margin-right:40px;">
    <div>
        <ul id="boutons-deployables">
            <li>
                <div class="Item1" href="#" title="Item 1">
                    <section>
                        <p>Contenu 1</p>
                    </section>
                </div>
            </li>
            
            <li>
                <div class="Item2" href="#" title="Item 2">
                    <section>
                        <p>Contenu 2</p>
                    </section>
                </div>
            </li>
            
            <li>
                <div class="Item3" href="#" title="Item 3">
                    <section>
                        <p>Contenu 3</p>
                    </section>
                </div>
            </li>
            
            <li>
                <div class="Item4" href="#" title="Item 4">
                    <section>
                        <p>Contenu 4</p>
                    </section>
                </div>
            </li>
            
            <li>
                <div class="Item5" href="#" title="Item 5">
                    <section>
                        <p>Contenu 5</p>
                    </section>
                </div>
            </li>
        </ul>
    </div>
</div>