How to center the whole dropdown menu?

Question

I have a problem with centering my dropdown menu. I've tried everything said on Google and this forum, but nothing helps.The entire submenu is displayed on the left side when opened.

How to put the whole submenu in the middle?

Thank you in advance.

example - https://imgshare.io/image/nVG0u

in jsfiddle- https://jsfiddle.net/em5dj0an

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

HTML:

<div id="navbaronder">
<div class="topnav unselectable" id="myTopnav">
    <div id="center1">
   <div id="center2">
       <div class="underline">
       <div id="container2">

<div class="dropdown">
<button class="dropbtn">Sales &amp; Marketing</button>
<div class="dropdown-content">
<a href="#">Sales</a>
<a href="#">Marketing</a>
</div>
</div>
           <div class="dropdown"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>

<div class="dropdown">
<button class="dropbtn">Administratie &amp; Accounting</button>
<div class="dropdown-content">
<a href="#">Administratie</a>
<a href="#">Boekhouding &amp; Accounting BE/NL</a>
<a href="#">Financieel Advies</a>
</div>
</div>
           <div class="dropdown"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>

<div class="dropdown">
<button class="dropbtn">Boekhouding &amp; Accounting</button>
<div class="dropdown-content">
<a href="#">Administratie</a>
<a href="#">Boekhouding &amp; Accounting BE/NL</a>
<a href="#">Financieel Advies</a>
</div>
</div>


           <div class="dropdown"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>

<div class="dropdown">
<button class="dropbtn">Logistiek &amp; Transport</button>
<div class="dropdown-content">
    <a href="#">Sales</a>
<a href="#">Marketing</a>
</div>
</div>

           <div class="dropdown"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>

<div class="dropdown">
<button class="dropbtn">Drone Fotografie &amp; Videografie</button>
<div class="dropdown-content">
    <a href="#">Sales</a>
<a href="#">Marketing</a>
</div>
</div>

           <div class="dropdown"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>

<div class="dropdown">
<button class="dropbtn">Opleidingen &amp; Cursussen</button>
<div class="dropdown-content">
    <a href="#">Sales</a>
<a href="#">Marketing</a>
</div>
</div>


  <a style="text-decoration:none;" href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a><!-- golemina na butona --> 
</div>
</div>
</div>
</div>
</div>
</div>

SCRIPT:

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

CSS:

/*********************************************************************************/
/* SERVICES MENU                                                                 */
/*********************************************************************************/


/* menu+submenu*/
#navbaronder {
  background-color: #dddddd;
  margin: 155px 0px 0px 0px;  
  transition: 0.4s;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 500;
  outline: 0; 
}

/*********************************************************************************/
/* UNSELECTABLE                                                                  */
/*********************************************************************************/

.unselectable {           
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

img::selection {          
    background: transparent;

}


/*********************************************************************************/
/* ANIMATING LINK UNDERLINES                               */
/*********************************************************************************/

/* pod4ertavane na pada6tite butoni*/
.underline > a, button  {
  position: relative;
  color: red;
  text-decoration: white;
}

.underline > a, button:hover {
  color: white;
}

.underline > a, button:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: white;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.underline > a, button:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}


/*********************************************************************************/
/* DROP DOWN RESPONSIVE MENU                                                     */
/*********************************************************************************/

body {margin:0;}

.topnav {
  overflow: hidden;
  background-color: #dddddd;  

}
#center1 {
    float: left;
    position: relative;
    left: 50%;

}

#center2 {
    float: left;
    position: relative;
    left: -50%;
}



.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 6px 8px; 
  text-decoration: none;
  font-size: 15px; 
}

.topnav .icon {  
  display: none;
  color:#2654BA;
}

.dropdown {    
  float: left; 
  overflow: hidden;

}


.dropdown .dropbtn {
  font-size: 17px;   
  border: none;
  outline: none;
  color: black;   
  padding: 6px 20px; 
  background-color: inherit;
  font-family: inherit;
  margin: 0px;
  /*  display: inline-block; ???????????? */
    /*padding: 5px 60px 0px 0px;   */

}

            .dropdown-content { 
  display: none;   
  position: fixed; 
  background-color: #f9f9f9;    
  min-width: 120px;      
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;   

}



            .dropdown-content a {   
  float: none;    
  color: black;
  padding: 6px 8px; 
  text-decoration: none;
  display: block;
  text-align: center; 
  background-color:#f1f1f1; 

}

.topnav a:hover, .dropdown:hover .dropbtn { 
  background-color:transparent; 
  color: #2651AB; 

}

.dropdown-content a:hover { 
  background-color: #ddd; 
  color: black;

}

.dropdown:hover .dropdown-content { 
  display:block;

}


@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

Answer 1

This may not be he perfect answer but it will solve the issue.

.dropdown{
    float: left;
    /* overflow: hidden; <- remove this */
    position: relative;
}

.dropdown-content{
    display: none;
    position: absolute;
    right: 0;
    left: 0;
    background-color: #f9f9f9;
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

/*********************************************************************************/
/* SERVICES MENU                                                                 */
/*********************************************************************************/


/* menu+submenu*/
#navbaronder {
  background-color: #dddddd;
  margin: 155px 0px 0px 0px;  
  transition: 0.4s;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 500;
  outline: 0; 
}

/*********************************************************************************/
/* UNSELECTABLE                                                                  */
/*********************************************************************************/

.unselectable {           
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

img::selection {          
    background: transparent;

}
 

/*********************************************************************************/
/* ANIMATING LINK UNDERLINES        pod4ertavane na menuto                       */
/*********************************************************************************/

/* pod4ertavane na pada6tite butoni*/
.underline > a, button  {
  position: relative;
  color: red;
  text-decoration: white;
}

.underline > a, button:hover {
  color: white;
}

.underline > a, button:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: white;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.underline > a, button:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}


/*********************************************************************************/
/* DROP DOWN RESPONSIVE MENU                                                     */
/*********************************************************************************/

body {margin:0;}

.topnav {
  background-color: #dddddd;  
  
}
#center1 {
    float: left;
    position: relative;
    left: 50%;
    
}

#center2 {
    float: left;
    position: relative;
    left: -50%;
}



.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 6px 8px; 
  text-decoration: none;
  font-size: 15px; 
}

.topnav .icon {  
  display: none;
  color:#2654BA;
}

.dropdown {    
  float: left; 
 position: relative;

}


.dropdown .dropbtn {
  font-size: 17px;   
  border: none;
  outline: none;
  color: black;   
  padding: 6px 20px; 
  background-color: inherit;
  font-family: inherit;
  margin: 0px;
  /*  display: inline-block; ???????????? */
    /*padding: 5px 60px 0px 0px;   */
  
}

            .dropdown-content { 
  display: none;   
  position: absolute; 
  right: 0;
  left: 0;
  background-color: #f9f9f9;    
  min-width: 120px;      
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;   

}



            .dropdown-content a {   
  float: none;    
  color: black;
  padding: 6px 8px; 
  text-decoration: none;
  display: block;
  text-align: center; 
  background-color:#f1f1f1; 

}

.topnav a:hover, .dropdown:hover .dropbtn { 
  background-color:transparent; 
  color: #2651AB; 
 
}

.dropdown-content a:hover { 
  background-color: #ddd; 
  color: black;

}

.dropdown:hover .dropdown-content { 
  display:block;

}


@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

<div id="navbaronder">
<div class="topnav unselectable" id="myTopnav">
    <div id="center1">
   <div id="center2">
       <div class="underline">
       <div id="container2">
           
<div class="dropdown">
<button class="dropbtn">Sales &amp; Marketing</button>
<div class="dropdown-content">
<a href="#">Sales</a>
<a href="#">Marketing</a>
</div>
</div>
           <div class="dropdown"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>
           
<div class="dropdown">
<button class="dropbtn">Administratie &amp; Accounting</button>
<div class="dropdown-content">
<a href="#">Administratie</a>
<a href="#">Boekhouding &amp; Accounting BE/NL</a>
<a href="#">Financieel Advies</a>
</div>
</div>
           <div class="dropdown"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>
           
<div class="dropdown">
<button class="dropbtn">Boekhouding &amp; Accounting</button>
<div class="dropdown-content">
<a href="#">Administratie</a>
<a href="#">Boekhouding &amp; Accounting BE/NL</a>
<a href="#">Financieel Advies</a>
</div>
</div>
           
           <div class="dropdown"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>
           
<div class="dropdown">
<button class="dropbtn">Logistiek &amp; Transport</button>
<div class="dropdown-content">
    <a href="#">Sales</a>
<a href="#">Marketing</a>
</div>
</div>
           
           <div class="dropdown"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>
           
<div class="dropdown">
<button class="dropbtn">Drone Fotografie &amp; Videografie</button>
<div class="dropdown-content">
    <a href="#">Sales</a>
<a href="#">Marketing</a>
</div>
</div>
           
           <div class="dropdown"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>
           
<div class="dropdown">
<button class="dropbtn">Opleidingen &amp; Cursussen</button>
<div class="dropdown-content">
    <a href="#">Sales</a>
<a href="#">Marketing</a>
</div>
</div>
          
  
  <a style="text-decoration:none;" href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a><!-- golemina na butona --> 
</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

changed position of dropdown from fixed to absolute!

removed overflow:hidden from navbar and .dropdown class.

hope this what you are looking for.

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

/*********************************************************************************/
/* SERVICES MENU                                                                 */
/*********************************************************************************/


/* menu+submenu*/
#navbaronder {
  background-color: #dddddd;
  transition: 0.4s;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 500;
  outline: 0; 
}

/*********************************************************************************/
/* UNSELECTABLE                                                                  */
/*********************************************************************************/

.unselectable {           
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

img::selection {          
    background: transparent;

}
 

/*********************************************************************************/
/* ANIMATING LINK UNDERLINES        pod4ertavane na menuto                       */
/*********************************************************************************/

/* pod4ertavane na pada6tite butoni*/
.underline > a, button  {
  position: relative;
  color: red;
  text-decoration: white;
}

.underline > a, button:hover {
  color: white;
}

.underline > a, button:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: white;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.underline > a, button:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}


/*********************************************************************************/
/* DROP DOWN RESPONSIVE MENU                                                     */
/*********************************************************************************/

body {margin:0;}

.topnav {
  background-color: #dddddd;  
  
}
#center1 {
    float: left;
    position: relative;
    left: 50%;
    
}

#center2 {
    float: left;
    position: relative;
    left: -50%;
}



.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 6px 8px; 
  text-decoration: none;
  font-size: 15px; 
}

.topnav .icon {  
  display: none;
  color:#2654BA;
}

.dropdown {    
  float: left; 
 position:relative;

}


.dropdown .dropbtn {
  font-size: 17px;   
  border: none;
  outline: none;
  color: black;   
  padding: 6px 20px; 
  background-color: inherit;
  font-family: inherit;
  margin: 0px;
  /*  display: inline-block; ???????????? */
    /*padding: 5px 60px 0px 0px;   */
  
}

            .dropdown-content { 
  display: none;   
  position: absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  background-color: #f9f9f9;    
  min-width: 120px;      
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;   

}



            .dropdown-content a {   
  float: none;    
  color: black;
  padding: 6px 8px; 
  text-decoration: none;
  display: block;
  text-align: center; 
  background-color:#f1f1f1; 

}

.topnav a:hover, .dropdown:hover .dropbtn { 
  background-color:transparent; 
  color: #2651AB; 
 
}

.dropdown-content a:hover { 
  background-color: #ddd; 
  color: black;

}

.dropdown:hover .dropdown-content { 
  display:block;

}


@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

<div id="navbaronder">
<div class="topnav unselectable" id="myTopnav">
    <div id="center1">
   <div id="center2">
       <div class="underline">
       <div id="container2">
           
<div class="dropdown">
<button class="dropbtn">Sales &amp; Marketing</button>
<div class="dropdown-content">
<a href="#">Sales</a>
<a href="#">Marketing</a>
</div>
</div>
           <div class="dropdown"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>
           
<div class="dropdown">
<button class="dropbtn">Administratie &amp; Accounting</button>
<div class="dropdown-content">
<a href="#">Administratie</a>
<a href="#">Boekhouding &amp; Accounting BE/NL</a>
<a href="#">Financieel Advies</a>
</div>
</div>
           <div class="dropdown"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>
           
<div class="dropdown">
<button class="dropbtn">Boekhouding &amp; Accounting</button>
<div class="dropdown-content">
<a href="#">Administratie</a>
<a href="#">Boekhouding &amp; Accounting BE/NL</a>
<a href="#">Financieel Advies</a>
</div>
</div>
           
           <div class="dropdown"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>
           
<div class="dropdown">
<button class="dropbtn">Logistiek &amp; Transport</button>
<div class="dropdown-content">
    <a href="#">Sales</a>
<a href="#">Marketing</a>
</div>
</div>
           
           <div class="dropdown"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>
           
<div class="dropdown">
<button class="dropbtn">Drone Fotografie &amp; Videografie</button>
<div class="dropdown-content">
    <a href="#">Sales</a>
<a href="#">Marketing</a>
</div>
</div>
           
           <div class="dropdown"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>
           
<div class="dropdown">
<button class="dropbtn">Opleidingen &amp; Cursussen</button>
<div class="dropdown-content">
    <a href="#">Sales</a>
<a href="#">Marketing</a>
</div>
</div>
          
  
  <a style="text-decoration:none;" href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a><!-- golemina na butona --> 
</div>
</div>
</div>
</div>
</div>
</div>

Answer 3

Just modify your dropdown structure like this

<div style="display: flex;justify-content: center;">
<div class="dropdown-content">
    <a href="#">Sales</a>
<a href="#">Marketing</a>
</div>
</div>

and it should work