Untitled

 <div class="custom-dropdown-menu"> <div class="main-service"><a href="/consultation-en-neuropsychologie/">Une consultation en neuropsychologie<i class="fas fa-chevron-down"></i></a></div> <div class="submenu"> <div><a href="/troubles-apprentissage/">Soutien pour les troubles de l'apprentissage</a></div> <div><a href="/evaluation-du-tdah/">Une évaluation du TDAH</a></div> <div><a href="/evaluation-autisme/">Une évaluation de l'autisme </a></div> <div><a href="/deficience-intellectuelle/">Des thérapies pour déficience intellectuelle</a></div> <div><a href="/tutorat-et-aide-aux-devoirs/">Du tutorat et de l’aide aux devoirs </a></div> </div> </div> <style> .custom-dropdown-menu { display: inline-block; width: 100%; position: relative; z-index: 9; } .main-service { /* Background color for the main service / color: #000; / Text color for the main service / padding: 2px; cursor: pointer; display: flex; justify-content: left; align-items: left; width: 120%; / Adjust the width as needed / font-size: 15px; font-family: 'Nunito Sans'; } .main-service i { margin-left: 10px; } .submenu { display: none; position: absolute; top: 100%; left: 0; z-index: 1000; width: 300px; / Adjust the width as needed / font-size:15px; font-family: Nunito Sans; align-items: left; width: 100%; } .submenu div { background-color: #fff; / Background color for submenu items / color: #333; / Text color for submenu items / padding: 10px; cursor: pointer; border-bottom: 1px solid #ddd; / Add a border between items / } .submenu div:last-child { border-bottom: none; / Remove border from the last item / } .custom-dropdown-menu:hover .submenu { display: block; } .custom-dropdown-menu a { color: #333; / Change link color / text-decoration: none; } .custom-dropdown-menu a:hover { color: #2FA5A9; / Change link color */ text-decoration: none; } </style>