// The anchor point for every absolute positioned submenu is the parent li
nav li {
  position: relative;
}

// First level of li should be next to each other
// Just using display: inline-block; on the first li elements 
// would cause a space between the li`s
// see https://css-tricks.com/fighting-the-space-between-inline-block-elements/
nav > ul {
  display: flex;
}

// Just a bit of styling for the link
// Always style the a, not the li
// Otherwise the end user is confused if he/she can't click the button
nav li a {
  display: block;
  padding: 10px 15px;
  background: green;
  border: 3px solid green;
  
  font-size: 1.25em;
  color: #fff;
  text-decoration: none;
  // Prevent whitespace wrapping if needed
  white-space: nowrap;
  transition: all .3s;
  
  &:hover {
    background: #fff;
    color: green;
  }
}

// initially hide every submenu and position it
nav ul ul {
  visibility: hidden;
  opacity: 0;
  
  // If needed set a width for the submenu
  min-width: 150px;
  
  // Instead of left: 0; you can use right: 0 if the main menu is 
  // on the very right side of the page.
  // Dont forget to adjust the "nav ul ul ul" selector as well
  position: absolute;
  top: 150%;
  left: 0;
  
  transition: all .3s; 
  // Change to higher transition value to increase effect
}

// Activate submenu when hovering
nav ul li:hover > ul {
  top: 100%;
  visibility: visible;
  opacity: 1;
}

// Position all sub-sub-menus beside the parent sub-menu
nav ul ul ul {
  left: 100%;
}

nav ul ul li:hover > ul {
  top: 0;
}

// ===== ADDITIONAL STYLING FOR CODEPEN =====

nav {
  max-width: 1000px;
  margin: 25px auto;
}

// ===== ANSERWS TO SOME QUESTIONS =====

/*

* Why not use classes?
To keep the specificity as low as possible and therefore make this code easy to extend. Therefore I used the "nav" element selctor as basis for all selectors to just affect the styling of nav menus.

* How to add "Submenu arrows" to visualize that there is a submenu?
This can only be handeled via classes. Add something like "has-submenu" to the li that has a submenu.
I only wanted to use element selectors in this example to keep the specificity low.

*/