如何集中整個下拉菜單？
[英]How to center the whole dropdown menu?
問題描述
我的下拉菜單居中有問題。 我已經嘗試了谷歌和這個論壇上所說的一切，但沒有任何幫助。打開時，整個子菜單顯示在左側。
如何把整個子菜單放在中間？
先感謝您。
示例 - https://imgshare.io/image/nVG0u
在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>
腳本：
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;
}
}
3 個解決方案
解決方案1
4 已采納 2019-08-01 12:52:15
將下拉的位置從fixed更改為absolute ！
刪除overflow:hidden從navbar和.dropdown類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 & 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>
解決方案2
1 2019-08-01 12:42:58
這可能不是他完美的答案，但它將解決問題。
.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 & 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>
解決方案3
1 2019-08-01 12:46:20
只需像這樣修改您的下拉結構
<div style="display: flex;justify-content: center;">
<div class="dropdown-content">
<a href="#">Sales</a>
<a href="#">Marketing</a>
</div>
</div>
它應該工作
如何使下拉菜單項居中？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.