body { font-family: sans-serif; margin: 0; }
/*     nav { background: #333; color: white; } */
    .navbar { padding: 10px; position: relative; }
    .mobile-menu-toggle { display: none; cursor: pointer; }
    .mobile-menu-toggle span {
      display: block;
      width: 25px;
      height: 3px;
      background: white;
      margin: 5px 0;
    }
    ul.menu {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
    }
    ul.menu li {
      position: relative;
    }
    pul.menu li a {
      display: block;
      padding: 10px 15px;
      color: white;
      text-decoration: none;
    }
    ul.submenu {
      display: none;
      list-style: none;
      padding-left: 20px;
  /*    background: #444;*/
    }
    ul.submenu li a {
      padding: 10px 15px;
    }

    /* Mobiel */
    @media (max-width: 768px) {
.submenu {
  position: relative;
}
      .mobile-menu-toggle { display: block; }
      ul.menu {
        display: none;
        flex-direction: column;
        /* background: #333; */
      }
      ul.menu.active {
        display: flex;
      }
      ul.submenu.active {
        display: block;
      }
    }