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 & Marketing</button>
<div class="dropdown-content">
<a href="#">Sales</a>
<a href="#">Marketing</a>
</div>
</div>
<div class="dropdown"><a href="#"> </a></div>
<div class="dropdown">
<button class="dropbtn">Administratie & Accounting</button>
<div class="dropdown-content">
<a href="#">Administratie</a>
<a href="#">Boekhouding & Accounting BE/NL</a>
<a href="#">Financieel Advies</a>
</div>
</div>
<div class="dropdown"><a href="#"> </a></div>
<div class="dropdown">
<button class="dropbtn">Boekhouding & Accounting</button>
<div class="dropdown-content">
<a href="#">Administratie</a>
<a href="#">Boekhouding & Accounting BE/NL</a>
<a href="#">Financieel Advies</a>
</div>
</div>
<div class="dropdown"><a href="#"> </a></div>
<div class="dropdown">
<button class="dropbtn">Logistiek & Transport</button>
<div class="dropdown-content">
<a href="#">Sales</a>
<a href="#">Marketing</a>
</div>
</div>
<div class="dropdown"><a href="#"> </a></div>
<div class="dropdown">
<button class="dropbtn">Drone Fotografie & Videografie</button>
<div class="dropdown-content">
<a href="#">Sales</a>
<a href="#">Marketing</a>
</div>
</div>
<div class="dropdown"><a href="#"> </a></div>
<div class="dropdown">
<button class="dropbtn">Opleidingen & 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()">☰</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;
}
}
