.menu_button {
  position: absolute;
  height: 40px;
}

.menu_button button{
  font-size: 18px; 
}


.menu_button{
z-index: 1;
position: absolute;
}
.logo{
z-index: 100;
position: relative;
}
#menubutton1{
position: absolute;
left: 0px;
margin: 0;
}


ul[role="menu"] {
  margin: 0;
  padding: 0;
  position: absolute;
  font-size: 110%;
  list-style: none;
  background-color: #eee;
  display: none;
}

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

/* focus and hover styling */

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

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

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: red;
}