align dropdown submenu under main menu-CodePudding

I made a navigation menu, with a dropdown submenus menu. Unfortunately, the main menu title width is shorter than the submenu. So I tried to align them to the center, with the left: -35%; properties, under the main menu. So moved them left, so that the center of the submenu will be under the main menu. In the first 2 menus, it works fine but where is width enough, then the submenu goes out from the center.

Any idea how I could align all submenus always centered under the main menu? Or any idea where I made mistake?

Here is my code:

* {
  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 >
  <ul  id="mst-menu">
    <li ><a href="#">Rólunk</a>
      <ul >
        <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 ><a href="#">Oktatás</a>
      <ul >
        <li  id="dropdown-lvl-2-pre" onclick="dropdown()"><a href="#">Oktatási Programok</a><span ><img src="https://www.pngmart.com/files/3/Down-Arrow-PNG-Image.png" alt=""></span>
          <ul >
            <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 ><a href="#">Milestone Consulting</a>
      <ul >
        <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 ><a href="#">Knowledge Port</a>
      <ul >
        <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>

Thank you!

CodePudding user response：

For selector .dropdown-lvl-1 add left:50% which moves the left hand edge of the dropdown to the centre of the parent then use transform:translateX(-50%) which moves it back 50% the width of the child, see below

* {
  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 >
  <ul  id="mst-menu">
    <li ><a href="#">Rólunk</a>
      <ul >
        <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 ><a href="#">Oktatás</a>
      <ul >
        <li  id="dropdown-lvl-2-pre" onclick="dropdown()"><a href="#">Oktatási
              Programok</a><span ><img src="https://www.pngmart.com/files/3/Down-Arrow-PNG-Image.png"
                alt=""></span>
          <ul >
            <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 ><a href="#">Milestone Consulting</a>
      <ul >
        <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 ><a href="#">Knowledge Port</a>
      <ul >
        <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>

CodePudding user response：

Your Properties looks like :

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

You need to make some changes if you want to align submenu in center of manu.

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

This is a popular way to align something in a center without using Flexbox.