<nav>
  <ul>
    <li><a href="#">Accueil</a></li>
    <li class="deroule"><a href="#">About <span class="fleche"></span></a>
      <ul>
        <li><a href="#" onclick="alert(2)">about 1</a></li>
        <li><a href="#">about 2</a></li>
        <li><a href="#">about 3</a></li>
      </ul>
    </li>
    <li class="deroule"><a href="#">Services <span class="fleche"></span></a>
      <ul>
        <li><a href="#">services 1</a></li>
        <li><a href="#">services 2</a></li>
        <li><a href="#">services 3</a></li>
        <li><a href="#">services 4</a></li>
        <li><a href="#">services 5</a></li>
      </ul>
    </li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente cumque tenetur recusandae. Non deserunt illo cupiditate minus quae magnam dolor doloribus ad exercitationem ipsam molestiae eius, vitae aut animi molestias?</p>
<p>Officiis nam ratione ullam unde iusto sint possimus architecto, tempora at reprehenderit vitae placeat ipsum libero aperiam odit optio similique rem corrupti velit et veniam impedit. Excepturi sed cumque a.</p>
<p>Earum asperiores tempora expedita voluptatum obcaecati cupiditate illo accusantium sed cumque maiores non minima facilis quisquam, vel repellat vero! Culpa, dolores. Molestias ad veniam molestiae modi cum nam pariatur optio!</p>
<p>Quaerat ipsum, sapiente sunt illum laborum nemo aliquid quod maiores hic officia facere temporibus ducimus dolor rem expedita quas commodi voluptas consequatur libero eligendi repellendus animi ipsam explicabo? Fugit, ad.</p>
<p>Excepturi minima asperiores id quaerat quae totam commodi vel voluptates. Animi, distinctio, adipisci repellendus ex, itaque eum odio eius assumenda minus quaerat tempora sed nihil? Ad quis aliquid beatae optio?</p>
<p>Perferendis sint voluptas voluptatem repellat molestias ad deleniti omnis, earum facere perspiciatis, ut maiores accusamus reiciendis repudiandae magnam. Optio consectetur maiores quasi mollitia dolorem sunt, minima voluptatibus saepe aliquid magni?</p>
<p>Dolorum, inventore non earum beatae, mollitia hic nulla eligendi commodi nostrum soluta corrupti quaerat ut adipisci dolores nobis quia, maxime maiores libero odio temporibus velit fugit quos? Atque, sunt unde.</p>
<p>Aliquid, accusamus possimus! Saepe accusamus, unde atque vel quae error fugiat cupiditate nostrum quasi repudiandae nulla itaque! Blanditiis nostrum earum ad aliquid. Expedita, impedit accusamus ea vitae sint quaerat quae?</p>
<p>Dolorum molestiae debitis, mollitia magnam ipsum aperiam ad asperiores dolores enim laboriosam reprehenderit harum quia, quisquam, consequatur voluptate! Optio aliquid doloremque vero ullam perspiciatis sapiente nulla et commodi ea aut!</p>
<p>Fuga at, sit in nam tenetur possimus quaerat illum esse dolorum voluptates eos corporis delectus quibusdam asperiores assumenda ut minima. Quis nihil, odio corrupti incidunt praesentium repellendus cupiditate dolorem aut?</p>
<p>Non expedita tenetur reprehenderit vero similique labore rem cum dicta nemo earum eveniet magnam eaque animi nostrum inventore harum sit voluptas eius odio saepe beatae nulla et, doloremque architecto. Quod!</p>
<p>Dolores, unde libero quasi quidem hic nisi reprehenderit veritatis ex soluta ad facere ipsa alias vitae, in perferendis quisquam est distinctio beatae, debitis fugiat suscipit et. Laudantium, unde deserunt? Blanditiis!</p>
<p>Odit aut facere facilis consequuntur qui cumque provident nobis fugiat accusamus repudiandae non nisi beatae amet soluta, minus dignissimos rem cum, voluptatem sunt alias ullam aliquam! Eaque quibusdam distinctio exercitationem!</p>
<p>Soluta autem laboriosam fuga error ut quo enim possimus quae! Iusto nam mollitia consequuntur iure officiis tenetur, sed saepe. Dolorum esse rerum quas facilis magni quaerat sed officiis, voluptates corporis?</p>
<p>Maxime adipisci, ullam, sint fuga quos, repudiandae architecto eos est distinctio debitis sunt? Aspernatur dicta atque minima magnam laudantium minus pariatur tempore at deserunt. Quisquam eum eos corrupti doloribus quidem?</p>
<p>Recusandae quas blanditiis veritatis at, mollitia incidunt amet illo. Cum autem minus ducimus illo fugit nemo dolorem commodi inventore magnam magni blanditiis consectetur corporis quaerat, debitis aspernatur, mollitia aliquid vero!</p>
<p>Nulla, ratione enim. Ut eos earum vero, dolorum modi alias quam ab, voluptatum corporis, natus asperiores laudantium fugit quidem nulla aspernatur a dolorem. Tenetur odio et odit mollitia! Iure, sequi?</p>
<p>Temporibus doloremque ipsa assumenda beatae neque sunt quas officia natus error, accusamus placeat recusandae est aperiam vero, odio, eveniet cupiditate? Perferendis cum modi sequi cumque ipsa quam velit tempora odit!</p>
/* reset */
*{
  box-sizing: border-box;
}
ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* custom menu */
nav:after{
  content: "";
  clear: both;
  display: block;
}
nav a{
  display: block;
  text-decoration: none;
  white-space: nowrap;
}
nav ul ul{
  background-color: #fff;
  display: none;
  position: absolute;
  min-width: 100%;
}
nav>ul{
  display: flex;
}
nav>ul>li{
  position: relative;
  margin: 1px;
  flex-grow: 1;
}
nav ul ul li+li{
  border-top: 1px solid white;
}
nav ul li a{
  background-color: silver;
  padding: 10px 20px;
  color: black;
  text-align: center;
}
nav>ul>li>a{
  background-color: rgb(63,70,76);
  color: white;
} 
nav ul ul a{
  background-color:  rgb(282,97,1);
  color: white;
}
.fleche {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 4px;
  vertical-align: middle;
  border-top: 6px solid;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}


(function() {
  var tabMenu = document.querySelectorAll('.deroule');
  var tabD = document.querySelectorAll('ul ul');
  function deroule(e){
    e.stopPropagation(); 
    obj = this.querySelector('ul');
    if(!this.open){
      tabMenu.forEach(ferme);
      obj.style.display = "block";
      this.open = true;
    }else{
      obj.style.display = "none";
      this.open = false;
    }
  }
  var ferme = function(obj,i){
    tabD[i].style.display = "none";
    obj.open = false;
  }
  var init = function(obj){
    obj.addEventListener("click",deroule);
    obj.open = false;
  }
  tabMenu.forEach(init);
  window.addEventListener("click",function(){
    tabMenu.forEach(ferme);
  });
  window.addEventListener("scroll",function(){
    tabMenu.forEach(ferme);
  });
})();  

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.