.menu_button {
  position: relative;
}

.menu_button button {
  font-size: 110%;
}


ul[role="menu"] {
  margin: 0;
  padding: 0;
  position: absolute;
  font-size: 110%;

  list-style: none;
  background-color: #EEEEEE;
  display: none;
}

ul[role="menu"] li[role="menuitem"]{
  display: block;
  padding: 0.25em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  background-color: #EEEEEE;
  width: 4em;
}

/* focus and hover styling */

button:focus,
button:hover,
input:focus,
input:hover {
  outline: 2px solid black;
}

input:focus,
input:hover {
  background-color: #EEEEEE;
}

ul[role="menu"] li[role="menuitem"]:focus,
ul[role="menu"] li[role="menuitem"].focus,
ul[role="menu"] li[role="menuitem"]:hover{
  background-color: black;
  color: white;
}