如何在导航链接下显示下拉菜单？

Question

我正在寻找一种解决方案来在导航栏中的链接下显示下拉菜单，这里的问题是下拉菜单有时太大，并且当它很宽时它会超出屏幕（下面的图片）。

选择必须显示在带有箭头的每个链接下方，并且不能超出屏幕，我不知道如何进一步计算，以便如果其链接也靠近屏幕中心，则选择显示在中心.

这是一个简单的例子：https://codepen.io/meruem92/pen/LYwLwRd 在此示例中，最后一个导航链接“产品 A”和“产品 B”，它们的子菜单会超出屏幕，因为它包含很多内容，我不知道在这种情况下该怎么办。

这是 html :

<div class="w-100">
<ul id="top_menu" role="menu" class="nav navbar-nav top_menu justify-content-center custom-flex-list">
    
<li role="presentation" class="nav-item">
    <a role="menuitem" href="/" class="nav-link custom_nav_link custom_nav_link_active">
        <span data-oe-model="website.menu" data-oe-id="18" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">Page d'accueil</span>
    </a>
</li>
<li role="presentation" class="nav-item dropdown True">
    <a data-bs-toggle="dropdown" href="#" role="menuitem" class="nav-link custom_nav_link custom_nav_link_active dropdown-toggle o_mega_menu_toggle" data-bs-display="static" aria-expanded="false">
        <span data-oe-xpath="/t[1]/li[2]/a[1]/span[1]" data-oe-model="website.menu" data-oe-id="11" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name" class="" style="">Nous connaître</span>
    </a>
    <div data-name="Mega Menu" data-oe-xpath="/t[1]/li[2]/div[1]" class="dropdown-menu o_mega_menu" data-oe-model="website.menu" data-oe-id="11" data-oe-field="mega_menu_content" data-oe-type="html" data-oe-expression="submenu.mega_menu_content" style="width: auto;"><div class="o_mega_menu-arrow" style="left: 111.992px;">
                <img src="/theme_ifpt/static/img/header/arrow_up.svg" alt="Rectangle" loading="lazy" style="">
            </div>
            <section class="o_cc1 ifp_about_us">
                    <div class="d-flex">
                        <div class="heardermenu-inside">
                            <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">À PROPOS</h4>
                            <nav class="nav flex-column">                   
                                
                                
                                
                                
                                <a href="#" class="nav-link px-0" data-name="Menu Item">
                                    Certifying
                                        body
                                </a>
                                <a href="#" class="nav-link px-0" data-name="Menu Item">
                                    Careers at
                                        IFP Training
                                </a>
                            </nav>
                        </div>
                        <div class="heardermenu-inside"> 
                            <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">NOS ENGAGEMENT</h4> 
                           <nav class="nav flex-column">
                                <a href="#" class="nav-link px-0" data-name="Menu Item">
                                    Quality
                                </a>
                                <a href="#" class="nav-link px-0" data-name="Menu Item">
                                        Educational commitment
                                </a>
                                
                                
                                
                                
                            </nav>
                        </div>
                </div>
            </section>
        </div>
    </li>
<li role="presentation" class="nav-item dropdown True">
    <a data-bs-toggle="dropdown" href="#" role="menuitem" class="nav-link custom_nav_link custom_nav_link_active dropdown-toggle o_mega_menu_toggle show active" data-bs-display="static" aria-expanded="true">
        <span data-oe-xpath="/t[1]/li[2]/a[1]/span[1]" data-oe-model="website.menu" data-oe-id="12" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name" class="underlined" style="color: rgb(42, 176, 119);">Nos solutions</span>
    </a>
    <div data-name="Mega Menu" data-oe-xpath="/t[1]/li[2]/div[1]" class="dropdown-menu o_mega_menu show" data-oe-model="website.menu" data-oe-id="12" data-oe-field="mega_menu_content" data-oe-type="html" data-oe-expression="submenu.mega_menu_content" style="width: auto; left: 0px; right: auto;" data-bs-popper="static"><div class="o_mega_menu-arrow" style="left: 103.531px;">
                <img src="/theme_ifpt/static/img/header/arrow_up.svg" alt="Rectangle" loading="lazy" style="">
            </div>
            <section class="o_cc1 ifp_our_solution">
                    <div class="d-flex ">
                        <div class="heardermenu-inside"> 
                            <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">EVALUATION AND COMPETENCY-BASED
                                        MANAGEMENT</h4> 
                           <nav class="nav flex-column">
                                <a href="#" class="nav-link px-0" data-name="Menu Item">
                                        
                                            Competency-based management
                                </a>
                                <a href="#" class="nav-link px-0" data-name="Menu Item">
                                        On-the job
                                            skills
                                </a>
                            </nav>
                        </div>
                        <div class="heardermenu-inside"> 
                            <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">FORMATION PROFESSIONNELLE</h4> 
                           <nav class="nav flex-column">
                                <a href="#" class="nav-link px-0" data-name="Menu Item">
                                        
                                            Inter/Intra/customized
                                </a>
                                
                                
                                <a href="#" class="nav-link px-0" data-name="Menu Item">
                                        Work-linked
                                            training
                                </a>
                            </nav>
                        </div>
                        <div class="heardermenu-inside"> 
                            <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">FORMATION EN APPRENTISSAGE</h4> 
                           <nav class="nav flex-column">
                                
                                
                                <a href="#" class="nav-link px-0" data-name="Menu Item">
                                        Apprentice
                                            information
                                </a>
                            </nav>
                        </div>
                        <div class="heardermenu-inside">
                            <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">VALIDATION DES COMPETENCES</h4> 
                           <nav class="nav flex-column">
                                <a href="#" class="nav-link px-0" data-name="Menu Item">
                                        
                                            National and international
                                            certifications
                                </a>
                                <a href="#" class="nav-link px-0" data-name="Menu Item">
                                        
                                            IFP Training Certificate
                                </a>
                            </nav>
                        </div>
                    </div>
            </section>
        </div>
    </li>
<li role="presentation" class="nav-item dropdown True">
    <a data-bs-toggle="dropdown" href="#" role="menuitem" class="nav-link custom_nav_link custom_nav_link_active dropdown-toggle o_mega_menu_toggle" data-bs-display="static" aria-expanded="false">
        <span data-oe-xpath="/t[1]/li[2]/a[1]/span[1]" data-oe-model="website.menu" data-oe-id="14" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name" class="" style="">Boutique</span>
    </a>
    <div data-name="Mega Menu" data-oe-xpath="/t[1]/li[2]/div[1]" class="dropdown-menu o_mega_menu" data-oe-model="website.menu" data-oe-id="14" data-oe-field="mega_menu_content" data-oe-type="html" data-oe-expression="submenu.mega_menu_content" style="width: auto; left: 0px; right: auto;">
<div class="o_mega_menu-arrow" style="left: 85.2578px;">
    <img src="/theme_ifpt/static/img/header/arrow_up.svg" alt="Rectangle" loading="lazy" style="">
</div>
<section class="s_mega_menu_odoo_menu o_cc1">
    <div class="container">
        <div class="row">
            <div class="heardermenu-inside">
                <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Ordinateurs &amp; Appareils</h4>
                
                <nav class="nav flex-column">
                    <a href="#" class="nav-link px-0" data-name="Menu Item">Ordinateurs portables</a>
                    
                    
                    
                    
                    
                </nav>
            </div>
            <div class="heardermenu-inside">
                <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Moniteurs</h4>
                
                <nav class="nav flex-column">
                    <a href="#" class="nav-link px-0" data-name="Menu Item">Télévisions</a>
                    
                    
                </nav>
            </div>
            <div class="heardermenu-inside">
                <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Électronique</h4>
                
                <nav class="nav flex-column">
                    <a href="#" class="nav-link px-0" data-name="Menu Item">Caméra</a>
                    
                    
                    
                    
                </nav>
            </div>
            <div class="heardermenu-inside">
                <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Promotions</h4>
                
                <nav class="nav flex-column">
                    <a href="#" class="nav-link px-0" data-name="Menu Item">Ordinateurs</a>
                    
                    
                    
                </nav>
            </div>
        </div>
    </div>
    <div class="container-fluid border-top s_mega_menu_odoo_menu_footer">
        <div class="row">
            <div class="col-12 pt8 pb8">
                <div class="s_social_media text-center o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
                    <h5 class="s_social_media_title d-none" contenteditable="true">Suivez-nous</h5>
                    <a href="/website/social/facebook" class="s_social_media_facebook me-3 ms-3" target="_blank" aria-label="Facebook">
                        <i class="fa fa-2x fa-facebook m-1 o_editable_media"></i>
                    </a>
                    <a href="/website/social/twitter" class="s_social_media_twitter me-3 ms-3" target="_blank" aria-label="Twitter">
                        <i class="fa fa-2x fa-twitter m-1 o_editable_media"></i>
                    </a>
                    <a href="/website/social/linkedin" class="s_social_media_linkedin me-3 ms-3" target="_blank" aria-label="LinkedIn">
                        <i class="fa fa-2x fa-linkedin m-1 o_editable_media"></i>
                    </a>
                    <a href="/website/social/github" class="s_social_media_github me-3 ms-3" target="_blank" aria-label="GitHub">
                        <i class="fa fa-2x fa-github m-1 o_editable_media"></i>
                    </a>
                    <a href="/website/social/youtube" class="s_social_media_youtube me-3 ms-3" target="_blank" aria-label="YouTube">
                        <i class="fa fa-2x fa-youtube m-1 o_editable_media"></i>
                    </a>
                    <a href="/website/social/instagram" class="s_social_media_instagram me-3 ms-3" target="_blank" aria-label="Instagram">
                        <i class="fa fa-2x fa-instagram m-1 o_editable_media"></i>
                    </a>
                    <a href="/website/social/tiktok" class="s_social_media_tiktok me-3 ms-3" target="_blank" aria-label="TikTok">
                        <i class="fa fa-2x fa-tiktok m-1 o_editable_media"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section></div>
    </li>
<li role="presentation" class="nav-item dropdown True">
    <a data-bs-toggle="dropdown" href="#" role="menuitem" class="nav-link custom_nav_link custom_nav_link_active dropdown-toggle o_mega_menu_toggle" data-bs-display="static" aria-expanded="false">
        <span data-oe-xpath="/t[1]/li[2]/a[1]/span[1]" data-oe-model="website.menu" data-oe-id="13" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name" class="" style="">Ressources</span>
    </a>
    <div data-name="Mega Menu" data-oe-xpath="/t[1]/li[2]/div[1]" class="dropdown-menu o_mega_menu" data-oe-model="website.menu" data-oe-id="13" data-oe-field="mega_menu_content" data-oe-type="html" data-oe-expression="submenu.mega_menu_content" style="width: auto;"><div class="o_mega_menu-arrow" style="left: 93.8516px;">
                <img src="/theme_ifpt/static/img/header/arrow_up.svg" alt="Rectangle" loading="lazy" style="">
            </div>
            <section class="o_cc1 ifp_resource">
                    <div class="d-flex">
                        <div class="heardermenu-inside"> 
                             <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">RESSOURCES</h4> 
                           <nav class="nav flex-column">
                                
                                
                                
                                <a href="#" class="nav-link px-0" data-name="Menu Item">
                                        
                                            Case studies
                                </a>
                            </nav>
                        </div>
                    </div>
            </section>
        </div>
    </li>
<li role="presentation" class="nav-item">
    <a role="menuitem" href="/event" class="nav-link custom_nav_link custom_nav_link_active">
        <span data-oe-model="website.menu" data-oe-id="24" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">Événements</span>
    </a>
</li>
<li role="presentation" class="nav-item dropdown True">
    <a data-bs-toggle="dropdown" href="#" role="menuitem" class="nav-link custom_nav_link custom_nav_link_active dropdown-toggle o_mega_menu_toggle" data-bs-display="static" aria-expanded="false">
        <span data-oe-xpath="/t[1]/li[2]/a[1]/span[1]" data-oe-model="website.menu" data-oe-id="21" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name" class="" style="">Contactez-nous</span>
    </a>
    <div data-name="Mega Menu" data-oe-xpath="/t[1]/li[2]/div[1]" class="dropdown-menu o_mega_menu" data-oe-model="website.menu" data-oe-id="21" data-oe-field="mega_menu_content" data-oe-type="html" data-oe-expression="submenu.mega_menu_content" style="width: auto; left: auto; right: 0px;">
<div class="o_mega_menu-arrow" style="left: 1190.84px;">
    <img src="/theme_ifpt/static/img/header/arrow_up.svg" alt="Rectangle" loading="lazy" style="">
</div>
<section class="s_mega_menu_odoo_menu o_cc1">
    <div class="container">
        <div class="row">
            <div class="heardermenu-inside">
                <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Ordinateurs &amp; Appareils</h4>
                
                <nav class="nav flex-column">
                    <a href="#" class="nav-link px-0" data-name="Menu Item">Ordinateurs portables</a>
                    
                    
                    
                    
                    
                </nav>
            </div>
            <div class="heardermenu-inside">
                <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Moniteurs</h4>
                
                <nav class="nav flex-column">
                    <a href="#" class="nav-link px-0" data-name="Menu Item">Télévisions</a>
                    <a href="#" class="nav-link px-0" data-name="Menu Item">Écrans de bureau</a>
                    <a href="#" class="nav-link px-0" data-name="Menu Item">Projecteurs</a>
                </nav>
            </div>
            <div class="heardermenu-inside">
                <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Électronique</h4>
                
                <nav class="nav flex-column">
                    <a href="#" class="nav-link px-0" data-name="Menu Item">Caméra</a>
                    
                    
                    
                    
                </nav>
            </div>
            <div class="heardermenu-inside">
                <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Promotions</h4>
                
                <nav class="nav flex-column">
                    
                    
                    
                    <a href="#" class="nav-link px-0" data-name="Menu Item">Réseaux</a>
                </nav>
            </div>
        </div>
    </div>
    
</section></div>
    </li>
    <li data-name="Language Selector" class="o_header_language_selector position-relative">
    
        <div class="js_language_selector  dropdown d-print-none">
            <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="btn border-0 dropdown-toggle nav-link btn-sm d-flex align-items-center fw-bold text-uppercase o_nav-link_secondary custom-list-langage">
<img data-oe-model="ir.ui.view" data-oe-id="973" data-oe-field="arch" data-oe-xpath="/t[1]/img[1]" class="o_lang_flag " src="/base/static/img/country_flags/fr.png?height=25" alt=" Français" loading="lazy" style="">
                <span class="align-middle">FR</span>
            </button>
            <div role="menu" class="dropdown-menu dropdown-menu-end">
                    <a class="dropdown-item js_change_lang " role="menuitem" href="/en/shop" data-url_code="en" title="English (US)">
<img data-oe-model="ir.ui.view" data-oe-id="973" data-oe-field="arch" data-oe-xpath="/t[1]/img[1]" class="o_lang_flag " src="/base/static/img/country_flags/us.png?height=25" alt="English (US)" loading="lazy" data-lazy-loading-initial-min-height="" style="min-height: 1px;">
                        <span class="align-middle ">EN</span>
                    </a>
                    <a class="dropdown-item js_change_lang active" role="menuitem" href="/fr/shop" data-url_code="fr" title=" Français">
<img data-oe-model="ir.ui.view" data-oe-id="973" data-oe-field="arch" data-oe-xpath="/t[1]/img[1]" class="o_lang_flag " src="/base/static/img/country_flags/fr.png?height=25" alt=" Français" loading="lazy" style="">
                        <span class="align-middle ">FR</span>
                    </a>
            </div>
        </div>
    
    </li>
                            
</ul>

                        </div>

这是我的js :

    document.querySelectorAll(".o_mega_menu_toggle").forEach(function (toggle) {
  toggle.addEventListener("click", function () {
    var dropdownMenu = toggle.nextElementSibling; // Sélectionne le dropdown associé
 
    dropdownMenu.style.width = "auto";
 
    var rect = dropdownMenu.getBoundingClientRect();
 
    if (rect.right > window.innerWidth) {
      dropdownMenu.style.left = "auto"; // Supprime le positionnement par défaut
      dropdownMenu.style.right = "0"; // L'aligne au bord droit de l'écran
    }
 
    if (rect.left < 0) {
      dropdownMenu.style.left = "0"; // L'aligne au bord gauche de l'écran
      dropdownMenu.style.right = "auto"; // Supprime l'alignement à droite
    }
 
    if (rect.width > window.innerWidth) {
      dropdownMenu.style.maxWidth = window.innerWidth - 20 + "px";
      dropdownMenu.style.overflowX = "auto";
    }
 
    var arrow = dropdownMenu.querySelector(".o_mega_menu-arrow");
    var toggleRect = toggle.getBoundingClientRect(); // Position du lien
    var dropdownRect = dropdownMenu.getBoundingClientRect(); // Position du dropdown
 
    var arrowLeft = toggleRect.left + toggleRect.width / 2 - dropdownRect.left;
 
    arrowLeft = Math.max(15, Math.min(arrowLeft, dropdownRect.width - 15));
 
    arrow.style.left = arrowLeft + "px";
  });
});

这是一些CSS：

.custom-flex-list {
display: flex;
gap: 12px;

.nav-item {
  div[data-name="Mega Menu"] {
    width: auto; /* Taille automatique basée sur le contenu */
    max-width: calc(100vw - 20px);
    padding: 15px;
    overflow-x: auto;
  }

  .o_mega_menu-arrow {
    display: block;
    position: absolute;
    top: -5px;
    transform: translateX(-50%);
    z-index: 1;
  }

  section[class^="o_cc1 ifp_"],
  section.s_mega_menu_odoo_menu {
    border-radius: 12px;
    width: max-content;
    padding: 30px;
  }
  .navbar-subItem-title {
    color: #2c7da9;
    width: 300px;
    max-width: 250px;
  }
  .heardermenu-inside {
    flex: 1;
    padding: 0 25px;
  }


  .custom_nav_link {
    padding: 20px 22px 20px 26px !important;

    span {
      padding-right: 10px;
      color: $primary-color;
      text-align: center;
      font-family: $font-montserrat;
      font-size: 18px;
      font-weight: 500;
      line-height: 24px;
    }
  }
}

li:nth-child(5) {
  display: flex;
  align-items: center;
  padding: 3px 0;

  > div {
    margin-top: 5px;
    padding: 0 4px;

    .custom-list-langage {
      display: flex;
      height: 33px;
      padding: 5px 27.5px;
      justify-content: center;
      align-items: center;
      gap: 11px;

      .o_lang_flag {
        width: 1.5em;
        height: 1.5em;
        margin-right: 0.5em;
        border-radius: unset;
        object-fit: unset;
        box-shadow: rgba(0, 0, 0, 0.429) 1px 1px 1px;
      }
      &:after {
        top: 0px !important;
      }
    }
  }
}

}

Answer 1

没有将

position: absolute

应用于

.dropdown-menu

，尽管菜单扩展代码似乎依赖于它。菜单的

maxWidth

不应该动态设置——单独使用 CSS 就足够了。缺少关闭当前打开的下拉菜单的代码。

可选：为了防止

.o_mega_menu-arrow

在滚动过程中移动，可以将其放置在

.nav-link

内。还强烈建议为较小的屏幕创建移动菜单。

document.querySelectorAll(".o_mega_menu_toggle,.dropdown-toggle").forEach(function(toggle) {
  toggle.addEventListener("click", function() {

    var dropdownMenu = toggle.nextElementSibling; // Sélectionne le dropdown associé
    var closeCurrent = (dropdownMenu.style.display == "block");

    // Hide all opened dropdown menus
    document.querySelectorAll(".custom-flex-list .dropdown-menu").forEach(function(menu) {
      menu.style.display = "none";
    });
    if (closeCurrent) {
      return;
    }

    dropdownMenu.style.display = "block";
    dropdownMenu.style.left = "auto";
    dropdownMenu.style.right = "auto";

    var rect = dropdownMenu.getBoundingClientRect();

    if (rect.right > window.innerWidth) {
      dropdownMenu.style.right = "0"; // L'aligne au bord droit de l'écran
    }

    if (rect.left < 0) {
      dropdownMenu.style.left = "0"; // L'aligne au bord gauche de l'écran
    }

    var arrow = dropdownMenu.querySelector(".o_mega_menu-arrow");
    if (!arrow) {
      return;
    }
    var toggleRect = toggle.getBoundingClientRect(); // Position du lien
    var dropdownRect = dropdownMenu.getBoundingClientRect(); // Position du dropdown

    var arrowLeft = toggleRect.left + toggleRect.width / 2;

    arrow.style.left = arrowLeft + "px";
  });
});

.custom-flex-list {
  display: flex;
  gap: 12px;
  list-style: none;
}

.custom-flex-list .nav-item div[data-name="Mega Menu"] {
  width: auto;
  /* Taille automatique basée sur le contenu */
  max-width: calc(100vw - 20px);
  padding: 15px;
  margin: 0 10px;
  overflow-x: auto;
  background: #eee;
  box-sizing: border-box;
}

.custom-flex-list .dropdown-menu {
  display: none;
  position: absolute;
}

.custom-flex-list .nav-item .o_mega_menu-arrow {
  display: block;
  position: fixed;
  margin-top: -3px;
  transform: translateX(-50%);
  z-index: 1;
}

.custom-flex-list .nav-item section[class^="o_cc1 ifp_"],
.custom-flex-list .nav-item section.s_mega_menu_odoo_menu {
  border-radius: 12px;
  width: max-content;
  padding: 30px;
}

.custom-flex-list .nav-item .navbar-subItem-title {
  color: #2c7da9;
  width: 300px;
  max-width: 250px;
}

.custom-flex-list .nav-item .heardermenu-inside {
  flex: 1;
  padding: 0 25px;
}

.custom-flex-list .nav-item .custom_nav_link {
  padding: 10px 15px;
}

.custom-flex-list .nav-item .custom_nav_link span {
  padding-right: 10px;
  color: #555;
  text-align: center;
  font-family: sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
}

.custom-flex-list li:nth-child(5)>div {
  margin-top: 5px;
  padding: 0 4px;
}

.custom-flex-list li:nth-child(5)>div .custom-list-langage {
  display: flex;
  height: 33px;
  padding: 5px 27.5px;
  justify-content: center;
  align-items: center;
  gap: 11px;
}

.custom-flex-list li:nth-child(5)>div .custom-list-langage .o_lang_flag {
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.5em;
  border-radius: unset;
  object-fit: unset;
  box-shadow: rgba(0, 0, 0, 0.429) 1px 1px 1px;
}

.custom-flex-list li:nth-child(5)>div .custom-list-langage:after {
  top: 0px;
}

.custom-flex-list .dropdown-menu .d-flex,
.custom-flex-list .dropdown-menu .s_mega_menu_odoo_menu .container .row {
  display: flex;
}

.js_change_lang {
  display: block;
}

<div class="w-100">
  <ul id="top_menu" role="menu" class="nav navbar-nav top_menu justify-content-center custom-flex-list">
    <li role="presentation" class="nav-item">
      <a role="menuitem" href="#" class="nav-link custom_nav_link custom_nav_link_active">
        <span data-oe-model="website.menu" data-oe-id="18" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">Page d'accueil</span>
      </a>
    </li>
    <li role="presentation" class="nav-item dropdown True">
      <a data-bs-toggle="dropdown" href="#" role="menuitem" class="nav-link custom_nav_link custom_nav_link_active dropdown-toggle o_mega_menu_toggle" data-bs-display="static" aria-expanded="false">
        <span data-oe-xpath="/t[1]/li[2]/a[1]/span[1]" data-oe-model="website.menu" data-oe-id="11" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name" class="">Nous connaître</span>
      </a>
      <div data-name="Mega Menu" data-oe-xpath="/t[1]/li[2]/div[1]" class="dropdown-menu o_mega_menu" data-oe-model="website.menu" data-oe-id="11" data-oe-field="mega_menu_content" data-oe-type="html" data-oe-expression="submenu.mega_menu_content" style="width: auto;">
        <div class="o_mega_menu-arrow" style="left: 111.992px;">
          <img src="/theme_ifpt/static/img/header/arrow_up.svg" alt="^" loading="lazy">
        </div>
        <section class="o_cc1 ifp_about_us">
          <div class="d-flex">
            <div class="heardermenu-inside">
              <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">À PROPOS</h4>
              <nav class="nav flex-column">
                <a href="#" class="nav-link px-0" data-name="Menu Item">
                  Certifying
                  body
                </a>
                <a href="#" class="nav-link px-0" data-name="Menu Item">
                  Careers at
                  IFP Training
                </a>
              </nav>
            </div>
            <div class="heardermenu-inside">
              <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">NOS ENGAGEMENT</h4>
              <nav class="nav flex-column">
                <a href="#" class="nav-link px-0" data-name="Menu Item">
                  Quality
                </a>
                <a href="#" class="nav-link px-0" data-name="Menu Item">
                  Educational commitment
                </a>
              </nav>
            </div>
          </div>
        </section>
      </div>
    </li>
    <li role="presentation" class="nav-item dropdown True">
      <a data-bs-toggle="dropdown" href="#" role="menuitem" class="nav-link custom_nav_link custom_nav_link_active dropdown-toggle o_mega_menu_toggle show active" data-bs-display="static" aria-expanded="true">
        <span data-oe-xpath="/t[1]/li[2]/a[1]/span[1]" data-oe-model="website.menu" data-oe-id="12" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name" class="underlined" style="color: rgb(42, 176, 119);">Nos
          solutions</span>
      </a>
      <div data-name="Mega Menu" data-oe-xpath="/t[1]/li[2]/div[1]" class="dropdown-menu o_mega_menu show" data-oe-model="website.menu" data-oe-id="12" data-oe-field="mega_menu_content" data-oe-type="html" data-oe-expression="submenu.mega_menu_content" style="width: auto; left: 0px; right: auto;"
        data-bs-popper="static">
        <div class="o_mega_menu-arrow" style="left: 103.531px;">
          <img src="/theme_ifpt/static/img/header/arrow_up.svg" alt="^" loading="lazy">
        </div>
        <section class="o_cc1 ifp_our_solution">
          <div class="d-flex ">
            <div class="heardermenu-inside">
              <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">EVALUATION AND COMPETENCY-BASED MANAGEMENT
              </h4>
              <nav class="nav flex-column">
                <a href="#" class="nav-link px-0" data-name="Menu Item">
                  Competency-based management
                </a>
                <a href="#" class="nav-link px-0" data-name="Menu Item">
                  On-the job
                  skills
                </a>
              </nav>
            </div>
            <div class="heardermenu-inside">
              <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">FORMATION PROFESSIONNELLE</h4>
              <nav class="nav flex-column">
                <a href="#" class="nav-link px-0" data-name="Menu Item">
                  Inter/Intra/customized
                </a>
                <a href="#" class="nav-link px-0" data-name="Menu Item">
                  Work-linked
                  training
                </a>
              </nav>
            </div>
            <div class="heardermenu-inside">
              <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">FORMATION EN APPRENTISSAGE</h4>
              <nav class="nav flex-column">
                <a href="#" class="nav-link px-0" data-name="Menu Item">
                  Apprentice
                  information
                </a>
              </nav>
            </div>
            <div class="heardermenu-inside">
              <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">VALIDATION DES COMPETENCES</h4>
              <nav class="nav flex-column">
                <a href="#" class="nav-link px-0" data-name="Menu Item">
                  National and international
                  certifications
                </a>
                <a href="#" class="nav-link px-0" data-name="Menu Item">
                  IFP Training Certificate
                </a>
              </nav>
            </div>
          </div>
        </section>
      </div>
    </li>
    <li role="presentation" class="nav-item dropdown True">
      <a data-bs-toggle="dropdown" href="#" role="menuitem" class="nav-link custom_nav_link custom_nav_link_active dropdown-toggle o_mega_menu_toggle" data-bs-display="static" aria-expanded="false">
        <span data-oe-xpath="/t[1]/li[2]/a[1]/span[1]" data-oe-model="website.menu" data-oe-id="14" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name" class="">Boutique</span>
      </a>
      <div data-name="Mega Menu" data-oe-xpath="/t[1]/li[2]/div[1]" class="dropdown-menu o_mega_menu" data-oe-model="website.menu" data-oe-id="14" data-oe-field="mega_menu_content" data-oe-type="html" data-oe-expression="submenu.mega_menu_content" style="width: auto; left: 0px; right: auto;">
        <div class="o_mega_menu-arrow" style="left: 85.2578px;">
          <img src="/theme_ifpt/static/img/header/arrow_up.svg" alt="^" loading="lazy">
        </div>
        <section class="s_mega_menu_odoo_menu o_cc1">
          <div class="container">
            <div class="row">
              <div class="heardermenu-inside">
                <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Ordinateurs &amp; Appareils</h4>
                <nav class="nav flex-column">
                  <a href="#" class="nav-link px-0" data-name="Menu Item">Ordinateurs portables</a>
                </nav>
              </div>
              <div class="heardermenu-inside">
                <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Moniteurs</h4>
                <nav class="nav flex-column">
                  <a href="#" class="nav-link px-0" data-name="Menu Item">Télévisions</a>
                </nav>
              </div>
              <div class="heardermenu-inside">
                <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Électronique</h4>
                <nav class="nav flex-column">
                  <a href="#" class="nav-link px-0" data-name="Menu Item">Caméra</a>
                </nav>
              </div>
              <div class="heardermenu-inside">
                <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Promotions</h4>
                <nav class="nav flex-column">
                  <a href="#" class="nav-link px-0" data-name="Menu Item">Ordinateurs</a>
                </nav>
              </div>
            </div>
          </div>
          <div class="container-fluid border-top s_mega_menu_odoo_menu_footer">
            <div class="row">
              <div class="col-12 pt8 pb8">
                <div class="s_social_media text-center o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
                  <h5 class="s_social_media_title d-none" contenteditable="true">Suivez-nous</h5>
                  <a href="#/website/social/facebook" class="s_social_media_facebook me-3 ms-3" target="_blank" aria-label="Facebook">
                    <i class="fa fa-2x fa-facebook m-1 o_editable_media"></i>
                  </a>
                  <a href="#/website/social/twitter" class="s_social_media_twitter me-3 ms-3" target="_blank" aria-label="Twitter">
                    <i class="fa fa-2x fa-twitter m-1 o_editable_media"></i>
                  </a>
                  <a href="#/website/social/linkedin" class="s_social_media_linkedin me-3 ms-3" target="_blank" aria-label="LinkedIn">
                    <i class="fa fa-2x fa-linkedin m-1 o_editable_media"></i>
                  </a>
                  <a href="#/website/social/github" class="s_social_media_github me-3 ms-3" target="_blank" aria-label="GitHub">
                    <i class="fa fa-2x fa-github m-1 o_editable_media"></i>
                  </a>
                  <a href="#/website/social/youtube" class="s_social_media_youtube me-3 ms-3" target="_blank" aria-label="YouTube">
                    <i class="fa fa-2x fa-youtube m-1 o_editable_media"></i>
                  </a>
                  <a href="#/website/social/instagram" class="s_social_media_instagram me-3 ms-3" target="_blank" aria-label="Instagram">
                    <i class="fa fa-2x fa-instagram m-1 o_editable_media"></i>
                  </a>
                  <a href="#/website/social/tiktok" class="s_social_media_tiktok me-3 ms-3" target="_blank" aria-label="TikTok">
                    <i class="fa fa-2x fa-tiktok m-1 o_editable_media"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </li>
    <li role="presentation" class="nav-item dropdown True">
      <a data-bs-toggle="dropdown" href="#" role="menuitem" class="nav-link custom_nav_link custom_nav_link_active dropdown-toggle o_mega_menu_toggle" data-bs-display="static" aria-expanded="false">
        <span data-oe-xpath="/t[1]/li[2]/a[1]/span[1]" data-oe-model="website.menu" data-oe-id="13" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name" class="">Ressources</span>
      </a>
      <div data-name="Mega Menu" data-oe-xpath="/t[1]/li[2]/div[1]" class="dropdown-menu o_mega_menu" data-oe-model="website.menu" data-oe-id="13" data-oe-field="mega_menu_content" data-oe-type="html" data-oe-expression="submenu.mega_menu_content" style="width: auto;">
        <div class="o_mega_menu-arrow" style="left: 93.8516px;">
          <img src="/theme_ifpt/static/img/header/arrow_up.svg" alt="^" loading="lazy">
        </div>
        <section class="o_cc1 ifp_resource">
          <div class="d-flex">
            <div class="heardermenu-inside">
              <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">RESSOURCES</h4>
              <nav class="nav flex-column">
                <a href="#" class="nav-link px-0" data-name="Menu Item">
                  Case studies
                </a>
              </nav>
            </div>
          </div>
        </section>
      </div>
    </li>
    <li role="presentation" class="nav-item">
      <a role="menuitem" href="#/event" class="nav-link custom_nav_link custom_nav_link_active">
        <span data-oe-model="website.menu" data-oe-id="24" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">Événements</span>
      </a>
    </li>
    <li role="presentation" class="nav-item dropdown True">
      <a data-bs-toggle="dropdown" href="#" role="menuitem" class="nav-link custom_nav_link custom_nav_link_active dropdown-toggle o_mega_menu_toggle" data-bs-display="static" aria-expanded="false">
        <span data-oe-xpath="/t[1]/li[2]/a[1]/span[1]" data-oe-model="website.menu" data-oe-id="21" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name" class="">Contactez-nous</span>
      </a>
      <div data-name="Mega Menu" data-oe-xpath="/t[1]/li[2]/div[1]" class="dropdown-menu o_mega_menu" data-oe-model="website.menu" data-oe-id="21" data-oe-field="mega_menu_content" data-oe-type="html" data-oe-expression="submenu.mega_menu_content" style="width: auto; left: auto; right: 0px;">
        <div class="o_mega_menu-arrow" style="left: 1190.84px;">
          <img src="/theme_ifpt/static/img/header/arrow_up.svg" alt="^" loading="lazy">
        </div>
        <section class="s_mega_menu_odoo_menu o_cc1">
          <div class="container">
            <div class="row">
              <div class="heardermenu-inside">
                <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Ordinateurs &amp; Appareils</h4>
                <nav class="nav flex-column">
                  <a href="#" class="nav-link px-0" data-name="Menu Item">Ordinateurs portables</a>
                </nav>
              </div>
              <div class="heardermenu-inside">
                <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Moniteurs</h4>
                <nav class="nav flex-column">
                  <a href="#" class="nav-link px-0" data-name="Menu Item">Télévisions</a>
                  <a href="#" class="nav-link px-0" data-name="Menu Item">Écrans de bureau</a>
                  <a href="#" class="nav-link px-0" data-name="Menu Item">Projecteurs</a>
                </nav>
              </div>
              <div class="heardermenu-inside">
                <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Électronique</h4>
                <nav class="nav flex-column">
                  <a href="#" class="nav-link px-0" data-name="Menu Item">Caméra</a>
                </nav>
              </div>
              <div class="heardermenu-inside">
                <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Promotions</h4>
                <nav class="nav flex-column">
                  <a href="#" class="nav-link px-0" data-name="Menu Item">Réseaux</a>
                </nav>
              </div>
            </div>
          </div>
        </section>
      </div>
    </li>
    <li data-name="Language Selector" class="o_header_language_selector position-relative">
      <div class="js_language_selector  dropdown d-print-none">
        <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="btn border-0 dropdown-toggle nav-link btn-sm d-flex align-items-center fw-bold text-uppercase o_nav-link_secondary custom-list-langage">
          <img data-oe-model="ir.ui.view" data-oe-id="973" data-oe-field="arch" data-oe-xpath="/t[1]/img[1]"
            class="o_lang_flag " src="/base/static/img/country_flags/fr.png?height=25" alt=" Français" loading="lazy"
           >
          <span class="align-middle">FR</span>
        </button>
        <div role="menu" class="dropdown-menu dropdown-menu-end">
          <a class="dropdown-item js_change_lang " role="menuitem" href="#/en/shop" data-url_code="en" title="English (US)">
            <img data-oe-model="ir.ui.view" data-oe-id="973" data-oe-field="arch" data-oe-xpath="/t[1]/img[1]" class="o_lang_flag " src="/base/static/img/country_flags/us.png?height=25" alt="English (US)" loading="lazy" data-lazy-loading-initial-min-height="" style="min-height: 1px;">
            <span class="align-middle ">EN</span>
          </a>
          <a class="dropdown-item js_change_lang active" role="menuitem" href="#/fr/shop" data-url_code="fr" title=" Français">
            <img data-oe-model="ir.ui.view" data-oe-id="973" data-oe-field="arch" data-oe-xpath="/t[1]/img[1]" class="o_lang_flag " src="/base/static/img/country_flags/fr.png?height=25" alt=" Français" loading="lazy">
            <span class="align-middle ">FR</span>
          </a>
        </div>
      </div>
    </li>
  </ul>
</div>