/* http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu */

body {
   cursor: pointer;
}

.menu {
   width: 100%;
   text-align: right;
   white-space: nowrap;
}

.menu * {
   z-index: 100;
   border-color: inherit;
   background-color: inherit;
}

.menu a {
   color: inherit;
   text-decoration: none;
}

.menu a,
.menu span[aria-haspopup="true"],
.menu div[aria-haspopup="true"] {
   display: inline-block;
   padding: 0 1em;
}

/* default hover style */
.menu a:hover,
.menu *:focus {
   text-decoration: underline;
   outline: none;
}

/* top level menu bar */
.menu ul {
   position: absolute;
   right: 0;
   display: none;
   padding: 0;
   margin: 0;
   list-style: none;
}

.menu:hover > ul {
   display: block;
}

/* top level menu bar items */
.menu ul li {
   position: relative;
   display: block;
   float: none;
   text-align: left;
}

/* menu bar text (link) */
.menu ul li a,
.menu ul li span[aria-haspopup="true"] {
   display: block;
}

/* menu bar text (drop down) */
.menu ul li span[aria-haspopup="true"] {
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
   cursor: default;
}

/* drop down menu */
.menu ul ul {
   position: absolute;
   display: none;
   padding: 0;
   margin-right: 100%;
   left: auto;
   top: 0;
}

/* drop down menu (hover over parent) */
.menu ul li:hover > ul {
   display: block;
}
/* do not combine this selector with others -- not supported by all browsers */
.menu ul li:focus-within > ul {
   display: block;
}

/* drop down menu items */
.menu ul ul li {
   position: relative;
   float: none; 
   left: 0;
   border: none;
   width: 50vw;
   white-space: normal;
   line-height: 1.25;
}

/* drop down menu item text */
.menu ul ul li a,
.menu ul ul li span[aria-haspopup="true"] {
   padding: 0.85em 1em;
}

/* third level menu */
.menu ul ul ul {
   margin-right: 100%;
   left: auto;
   top: 0;
}

.menu ul ul ul li:first-child {
   border-top: none;
}

.hamburger {
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  background-color: inherit;
}
.hamburger > div {
  height: 4px;
  margin: 4px 0;
  background-color: currentColor;
}