Simple SCSS to nest menu items in a WordPress Menu

wp_nested_nav_styling.scss

/* 
  Styling that correctly nests a WordPress menu generated with wp_nav_menu, with the container flag set to false (up to you how you implement)
  
  --> Not yet mobile friendly <--
  --> No additional classes need to be added to the menu the wp_nav_menu function <--
  --> Be sure to call the function inside a container element with the appropriate class of navbar <--
  --> Create and manage the menu via WP Appearance > Menu <--
  
  I left my initial styling here just as an example, so styles like font sizes and colors can be ignored
  What's important to note is when display changes for ul/li on hovers
  See the inline comments for an idea of where the breaks are
  
  Example HTML structure (which is produced by wp_nav_menu):
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Work</a>
            <ul>
              <li><a href="#">Performances</a></li>
              <li><a href="#">Classes</a></li>
            </ul>
          </li>
          <li><a href="#">Calendar</a></li>
          <li><a href="#">Gallery</a>
            <ul>
              <li><a href="#">Photos</a></li>
              <li><a href="#">Videos</a></li>
            </ul>
          </li>
          <li><a href="#">Contact</a></li>
        </ul>
      
      
      PHP to call the menu:
      
      <nav class="navbar">
        <?php

         $defaults = array(
          'container' => false,
          'theme_location' => 'primary-menu'
        );
        wp_nav_menu($defaults);

        ?>

      </nav>
  */

.navbar {
  ul {
    font-size: 0;
    list-style-type: none;
    // initial li
    li {
      font-size: 1rem;
      font-weight: 400;
      display: inline-block;
      padding: 15px;
      position: relative;

      a {
        text-transform: uppercase;
        color: $secondary-text-light;
      }
       // secondary ul
        ul {
          display: none;
          box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        }
      // initial li:hover
      &:hover {
        cursor: pointer;
        background-color: $white;

        a {
          color: $primary-text-dark;
        }
        // secondary ul visibility change
        ul {
          z-index: 1;
          display: block;
          margin-top: 15px;
          width: 200px;
          left: 0;
          position: absolute;
          // secondary li
          li {
            display: block;
            background-color: $accent-blue;
            a {
              color: $secondary-text-light;
            }
            &:hover {
              background-color: $white;
              a {
                color: $primary-text-dark;
              }
            }
          }
        }
      }
    }
  }
}