我制作了一个导航菜单，带有下拉子菜单。遗憾的是，主菜单标题宽度比子菜单宽度短。因此，我尝试将它们与主菜单下的left: -35%;属性对齐。将它们向左移动，使子菜单的中心位于主菜单下。在前两个菜单中，它工作得很好，但在宽度足够的地方，子菜单就会从中心出来。
你知道我如何将所有子菜单始终居中在主菜单下吗？或者知道我在哪里犯了错吗？
这是我的代码：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {}
body {
width: 100%;
min-height: 100vh;
margin: 0;
padding: 0;
}
.navbar {
background-color: aliceblue;
}
.p {
display: block;
}
/* NAVIGATION */
.mst-lang-menu {
position: relative;
font-size: 15px;
}
.arrow {
position: absolute;
right: 10px;
top: 8px;
height: 15px;
cursor: pointer;
}
.arrow img {
height: 15px;
}
.dropdown-open ul {
max-height: 300px;
}
.mst-nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
flex-wrap: wrap;
position: fixed;
width: 100%;
top: 0;
z-index: 999;
max-width: 1440px;
font-family: 'Avenir-Medium', sans-serif;
margin: 0;
padding: 0;
}
.mst-nav-menu {
display: flex;
justify-content: space-around;
margin-top: 0;
margin: 0;
gap: 10px;
}
.mst-nav-menu>li {
list-style: none;
position: relative;
text-align: center;
padding: 0px 20px 0px 20px;
}
.mst-nav-menu a {
text-transform: uppercase;
padding: 20px 0px 25px 0px;
display: block;
white-space: nowrap;
border-top: solid 9px white;
color: black;
text-decoration: none;
/* font-weight:bold; */
font-size: 15px;
}
.mst-nav-menu>li:hover>a {
border-top: solid 9px #FDC72F;
}
.dropdown-lvl-1,
.dropdown-lvl-1 a {
padding: 0;
font-size: 12px;
background: red;
text-align: left;
}
.dropdown-lvl-1 {
list-style: none;
position: absolute;
visibility: hidden;
margin-top: 0px;
top: 100%;
left: -32%;
}
.dropdown-lvl-1 li a {
border: none;
padding: 10px 22px 10px 22px;
}
.dropdown-lvl-1 li {
border: none;
}
.mst-nav-menu li:hover .dropdown-lvl-1 li {
visibility: visible;
}
.main-menu {
position: relative;
display: block;
margin: 0;
}
.dropdown-lvl-1>li:hover,
.dropdown-lvl-1>li:hover>a {
background: #FDC72F;
}
.dropdown-lvl-2 {
list-style: none;
position: relative;
max-height: 0px;
overflow: hidden;
padding: 0;
}
.dropdown-lvl-2>li:hover,
.dropdown-lvl-2>li:hover>a {
background: #FDC72F;
}
.dropdown-lvl-2>li>a {
padding: 10px 20px 10px 40px;
white-space: pre-wrap;
}
.dropdown-lvl-2-pre:hover ul,
.dropdown-lvl-2-pre:hover .dropdown-lvl-2 {
max-height: 300px;
}<nav class="mst-nav bg-white p-0 m-0">
<ul class="mst-nav-menu" id="mst-menu">
<li class="main-menu"><a href="#">Rólunk</a>
<ul class="dropdown-lvl-1">
<li><a href="#">Céljaink</a></li>
<li><a href="#">Milestone történet</a></li>
<li><a href="#">Dolgozz Velünk</a></li>
<li><a href="#">W17</a></li>
<li><a href="#">Egyesület</a></li>
</ul>
</li>
<li class="main-menu"><a href="#">Oktatás</a>
<ul class="dropdown-lvl-1">
<li class="dropdown-lvl-2-pre" id="dropdown-lvl-2-pre" onclick="dropdown()"><a href="#">Oktatási Programok</a><span class="arrow"><img src="https://www.pngmart.com/files/3/Down-Arrow-PNG-Image.png" alt=""></span>
<ul class="dropdown-lvl-2">
<li><a href="#">Core program</a></li>
<li><a href="#">Access Program</a></li>
<li><a href="#">Milestone Advising Program</a></li>
</ul>
</li>
<li><a href="#">Tanév felépítése</a></li>
<li><a href="#">Nyílt nap</a></li>
<li><a href="#">Jelentkezés és felvételi</a></li>
<li><a href="#">Tandíj és ösztöndíjak</a></li>
<li><a href="#">Diákélet</a></li>
<li><a href="#">Személyes konzultáció</a></li>
<li><a href="#">Középiskola választás</a></li>
</ul>
</li>
<li class="main-menu"><a href="#">Milestone Consulting</a>
<ul class="dropdown-lvl-1">
<li><a href="#">Céljaink</a></li>
<li><a href="#">Milestone történet</a></li>
<li><a href="#">Dolgozz Velünk</a></li>
<li><a href="#">W17</a></li>
<li><a href="#">Egyesület</a></li>
</ul>
</li>
<li class="main-menu"><a href="#">Knowledge Port</a>
<ul class="dropdown-lvl-1">
<li><a href="#">Céljaink</a></li>
<li><a href="#">Milestone történet</a></li>
<li><a href="#">Dolgozz Velünk</a></li>
</ul>
</li>
</ul>
</nav>谢谢！
对于选择器.dropdown-lvl-1，添加left:50%，将下拉列表的左侧边缘移动到父项的中心，然后使用transform:translateX(-50%)，将其向后移动子项宽度的50%，请参见下面的
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {}
body {
width: 100%;
min-height: 100vh;
margin: 0;
padding: 0;
}
.navbar {
background-color: aliceblue;
}
.p {
display: block;
}
/* NAVIGATION */
.mst-lang-menu {
position: relative;
font-size: 15px;
}
.arrow {
position: absolute;
right: 10px;
top: 8px;
height: 15px;
cursor: pointer;
}
.arrow img {
height: 15px;
}
.dropdown-open ul {
max-height: 300px;
}
.mst-nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
flex-wrap: wrap;
position: fixed;
width: 100%;
top: 0;
z-index: 999;
max-width: 1440px;
font-family: 'Avenir-Medium', sans-serif;
margin: 0;
padding: 0;
}
.mst-nav-menu {
display: flex;
justify-content: space-around;
margin-top: 0;
margin: 0;
gap: 10px;
}
.mst-nav-menu>li {
list-style: none;
position: relative;
text-align: center;
padding: 0px 20px 0px 20px;
}
.mst-nav-menu a {
text-transform: uppercase;
padding: 20px 0px 25px 0px;
display: block;
white-space: nowrap;
border-top: solid 9px white;
color: black;
text-decoration: none;
/* font-weight:bold; */
font-size: 15px;
}
.mst-nav-menu>li:hover>a {
border-top: solid 9px #FDC72F;
}
.dropdown-lvl-1,
.dropdown-lvl-1 a {
padding: 0;
font-size: 12px;
background: red;
text-align: left;
}
.dropdown-lvl-1 {
list-style: none;
position: absolute;
visibility: hidden;
margin-top: 0px;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
.dropdown-lvl-1 li a {
border: none;
padding: 10px 22px 10px 22px;
}
.dropdown-lvl-1 li {
border: none;
}
.mst-nav-menu li:hover .dropdown-lvl-1 li {
visibility: visible;
}
.main-menu {
position: relative;
display: block;
margin: 0;
}
.dropdown-lvl-1>li:hover,
.dropdown-lvl-1>li:hover>a {
background: #FDC72F;
}
.dropdown-lvl-2 {
list-style: none;
position: relative;
max-height: 0px;
overflow: hidden;
padding: 0;
}
.dropdown-lvl-2>li:hover,
.dropdown-lvl-2>li:hover>a {
background: #FDC72F;
}
.dropdown-lvl-2>li>a {
padding: 10px 20px 10px 40px;
white-space: pre-wrap;
}
.dropdown-lvl-2-pre:hover ul,
.dropdown-lvl-2-pre:hover .dropdown-lvl-2 {
max-height: 300px;
}<nav class="mst-nav bg-white p-0 m-0">
<ul class="mst-nav-menu" id="mst-menu">
<li class="main-menu"><a href="#">Rólunk</a>
<ul class="dropdown-lvl-1">
<li><a href="#">Céljaink</a></li>
<li><a href="#">Milestone történet</a></li>
<li><a href="#">Dolgozz Velünk</a></li>
<li><a href="#">W17</a></li>
<li><a href="#">Egyesület</a></li>
</ul>
</li>
<li class="main-menu"><a href="#">Oktatás</a>
<ul class="dropdown-lvl-1">
<li class="dropdown-lvl-2-pre" id="dropdown-lvl-2-pre" onclick="dropdown()"><a href="#">Oktatási
Programok</a><span class="arrow"><img src="https://www.pngmart.com/files/3/Down-Arrow-PNG-Image.png"
alt=""></span>
<ul class="dropdown-lvl-2">
<li><a href="#">Core program</a></li>
<li><a href="#">Access Program</a></li>
<li><a href="#">Milestone Advising Program</a></li>
</ul>
</li>
<li><a href="#">Tanév felépítése</a></li>
<li><a href="#">Nyílt nap</a></li>
<li><a href="#">Jelentkezés és felvételi</a></li>
<li><a href="#">Tandíj és ösztöndíjak</a></li>
<li><a href="#">Diákélet</a></li>
<li><a href="#">Személyes konzultáció</a></li>
<li><a href="#">Középiskola választás</a></li>
</ul>
</li>
<li class="main-menu"><a href="#">Milestone Consulting</a>
<ul class="dropdown-lvl-1">
<li><a href="#">Céljaink</a></li>
<li><a href="#">Milestone történet</a></li>
<li><a href="#">Dolgozz Velünk</a></li>
<li><a href="#">W17</a></li>
<li><a href="#">Egyesület</a></li>
</ul>
</li>
<li class="main-menu"><a href="#">Knowledge Port</a>
<ul class="dropdown-lvl-1">
<li><a href="#">Céljaink</a></li>
<li><a href="#">Milestone történet</a></li>
<li><a href="#">Dolgozz Velünk</a></li>
</ul>
</li>
</ul>
</nav>您的属性看起来像：
.dropdown-lvl-1 {
list-style: none;
position: absolute;
visibility: hidden;
margin-top: 0px;
top: 100%;
left: -35%;
}
若要将子菜单对齐在手册的中心，则需要进行一些更改。
.dropdown-lvl-1 {
left: 50%;
transform:translateX(-50%);
}
这是一种在不使用Flexbox的情况下将东西居中对齐的流行方法。