/* For this Codepen purpose */
body {
  font-family: monospace;
  background-color: #52d2bc;
}

.vertical-spacing {
  height: 300px;
  display: block;
}

.demo-left {
  float: left;
}

.demo-right {
  float: right;
}

/* ****************************************** */
/* Dropdown menu styling */
/* ****************************************** */

.dropdown {
  display: block;
  transition-duration: 0.2s;
  position: relative;
}

.dropdown > a {
  display: block;
  padding: .6em 1em;
}

/* all links */
a {
  display: block;
  height: 100%;
  text-decoration: none;
  color: black;
  padding: .6em 1em;
}

/* menu item */
li.dropdown__menu-item {
 display: block;
 transition-duration: 0.2s;
 position: relative;
}

/* When menu item is hovered, tabbed, or contains child with focus, */
li.dropdown__menu-item:focus,
li.dropdown__menu-item:focus-within,
li.dropdown__menu-item:hover {
  background-color: #b2f1e6;
  cursor: pointer;
}

/* Ensures that hover background won't cover bottom outline of focused item above*/
li.dropdown__menu-item:focus,
li.dropdown__menu-item:focus-within {
  z-index: 1;
}
 
/* Toggle styling when dropdown is focused, hovered, or contains child with focus */
.dropdown:focus,
.dropdown:focus-within,
.dropdown:hover > a.dropdown__toggle {
  text-decoration: underline;
  cursor: pointer;
}

ul.dropdown__menu {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 0.2s ease;
  display: none;
  background-color: white;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 7rem;
/*  When toggle is focused, bottom border cuts off when dropdown is open.   */
  margin-top: 1rem;
}

/* Dropdown menu when dropdown is focused or child element is focused*/
.dropdown:focus > ul.dropdown__menu,
.dropdown:focus-within > ul.dropdown__menu {
  visibility: visible;
  opacity: 1;
  display: block;
}

.dropdown__menu-item {
  clear: both;
  width: 100%;
  text-align: left;
}