如何使整个下拉菜单居中？

Question

我在将下拉菜单居中时遇到问题。我已经尝试了 Google 和这个论坛上所说的所有内容，但是打开时 helps.The 整个子菜单都没有显示在左侧。

如何把整个子菜单放在中间？

提前致谢。

在 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>

脚本：

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

这可能不是完美的答案，但它会解决问题。

.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

只需像这样修改您的下拉结构

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

它应该可以工作

Answer 3

已将下拉列表的位置从 fixed 更改为 absolute！

从导航栏和 .dropdown class.

中删除了 overflow:hidden

希望这就是您要找的。

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>

如何使整个下拉菜单居中？

How to center the whole dropdown menu?

html

css

submenu

dropdown