Aligning items in a drop-down menu

[Apache]

I would like to learn by this example of a simple website, how to align nav items when you have a dropdown menu? I just couldn’t find content like an article that will benefit me to learn this step.

[PaulOB]

You need to hide the nested items (the ul) and then show them when hovered.

Here’s a start but you will need to style the drop items themselves.

.navbar__menu li{list-style:none;}
.navbar__menu li{
  position:relative;/* stacking context for nested dropdown */
} 
.navbar__menu ul{
  position:absolute;
  top:0;
  left:-200vw;/* hide off the left side*/
}
.navbar__menu li:hover > ul{
  left:auto;/* show menu*/
  top:100%;
  transition:top .5s ease, left 0s;
}

Here’s a fully styles version that you can compare.

[PaulOB]

Next: To style the dropdown you will need to add some more rules specific to the nested portion.

If you add the following code to the end of your codepen you can see the effect and work out from the bright colors what does what.

.navbar__menu li {
  list-style: none;
}
.navbar__menu li {
  position: relative; /* stacking context for nested dropdown */
}
.navbar__menu ul {
  position: absolute;
  top: 200%;
  left: -200vw; /* hide off the left side*/

}
.navbar__menu li:hover > ul {
  left: auto; /* show menu*/
  top: 100%;
  transition: top 0.5s ease, left 0s;
  opacity: 1;
}

.dropdown-content {
  box-shadow: 0px 0px rgba(0, 0, 0, 0.5);
  min-width: 200px;
  opacity: 0.7;
}
.dropdown-content a {
  white-space: nowrap;
  background: teal;
  padding: 5px;
  margin: 0;
  border-bottom: 1px solid #fff;
}
.navbar__menu li:hover > a{
  background: blue;
}

That’s basically the dropdown styling and mechanics sorted.

The dropdown is pushed off to the side of the screen so you can’t see it but when you hover the menu item the css brings it back into view. It is often better to hide things off screen rather than use display;none.

I will wait to you digest that before replying again and then you can ask more specific questions about the menu and menu bar. You will need to specify exactly what you want to learn rather than saying teach me this menu as that would involve me teaching the whole of the CSS specs when maybe you just wanted to know how to change one little thing