Dropdown menu B4

Bonjour !

Je m'excuse d'avance si un topic a déjà été créé je n'ai pas cherché.

J'ai un petit soucis, je veux faire des dropdown avec Bootstrap 4, jusque là tout va bien, j'ai 4 catégories Thes, Infusions, Packs, Store.

Quand je clique sur The, tout vas très bien le menu s'ouvre bien, cependant quand je clique sur les trois autres, c'est toujours le menu du thé qui s'ouvre et non ceux propre aux catégories.

Merci d'avance si vous avez la solution !

<div class="col-md-2 d-flex align-items-center justify-content-center" id="dropdownMenuThes" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <li class="d-md-inline-flex p-2">
                        <a href="#" role="button">THES</a>
                    </li>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuThes">
                        <a class="dropdown-item" href="#">Thé Noir</a>
                        <a class="dropdown-item" href="#">Thé Vert</a>
                        <a class="dropdown-item" href="#">Thé Rooibos</a>
                    </div>
                </div>
                <div class="col-md-2 d-flex align-items-center justify-content-center" id="dropdownMenuInfusions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <li class="d-md-inline-flex p-2">
                        <a href="#" role="button">INFUSIONS</a>
                    </li>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuInfusions">
                        <a class="dropdown2-item" href="#">Fruité</a>
                        <a class="dropdown-item" href="#">Gourmand</a>
                        <a class="dropdown-item" href="#">Détox</a>
                        <a class="dropdown-item" href="#">Bien-être</a>
                    </div>
                </div>
                <div class="col-md-2 d-flex align-items-center justify-content-center" id="dropdownMenuPacks" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <li class="d-md-inline-flex p-2">
                        <a href="#" role="button">PACKS</a>
                    </li>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuPacks">
                        <a class="dropdown-item" href="#">Kit à thé</a>
                        <a class="dropdown-item" href="#">Coffrets</a>
                        <a class="dropdown-item" href="#">Thé-Box</a>
                    </div>
                </div>
                <div class="col-md-2 d-flex align-items-center justify-content-center" id="dropdownMenuStore" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <li class="d-md-inline-flex p-2">
                        <a href="#" role="button">STORE</a>
                    </li>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuStore">
                        <a class="dropdown-item" href="#">Mug</a>
                        <a class="dropdown-item" href="#">Théières</a>
                        <a class="dropdown-item" href="#">Infuseur</a>
                        <a class="dropdown-item" href="#">Pince à thé</a>
                    </div>
                </div>

Modifié par dbkable (30 Dec 2017 - 20:23)