在主菜單下對齊下拉子菜單

Question

我制作了一個導航菜單，帶有一個下拉子菜單。 不幸的是，主菜單標題寬度比子菜單短。 所以我試着將它們對齊到中心， 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>

謝謝！

Answer 1

對於選擇器.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>

Answer 2

你的屬性看起來像：

.dropdown-lvl-1 {
  list-style: none;
  position: absolute;
  visibility: hidden;
  margin-top: 0px;
  top: 100%;
  left: -35%;
}

如果你想在 manu 的中心對齊子菜單，你需要做一些改變。

.dropdown-lvl-1 {
  left: 50%;
  transform:translateX(-50%);
}

這是在不使用 Flexbox 的情況下將某些內容居中對齊的流行方法。