<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#"> <img src="https://img.icons8.com/cotton/64/000000/smart-home-checked.png" width="30" height="30" class="d-inline-block align-top" alt=""> Bootstrap </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarDemoDiv01"> <ul class="nav navbar-nav navbar-left mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Accueil</a> </li> <li class="nav-item"> <a class="nav-link" href="#">A propos</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-expanded="false"> Catégories </a> <!-- bloc menu déroulant --> <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <li><a class="dropdown-item" href="#">Carégorie 1</a></li> <li><a class="dropdown-item" href="#">Autre catégorie</a></li> <li><a class="dropdown-item" href="#">Derniere catégorie</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> <div class="collapse navbar-collapse justify-content-end" id="navbarDemoDiv02"> <ul class="nav navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLog" data-toggle="dropdown" aria-expanded="false"> Profile </a> <!-- bloc menu déroulant --> <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLog"> <li><a class="dropdown-item" href="#">Données personnelles</a></li> <li><a class="dropdown-item" href="#">Tableau de bord</a></li> <li><a class="dropdown-item" href="#">Se déconecter</a></li> </ul> </li> </ul> </div> </nav>

.dropdown-menu{ position: absolute; left:100px; background-color: blue; justify-content: space-around; } .dropdown-item{ color:red; display:inline-block; width:20px; }