a {
  text-decoration: none;
}

nav {
  font-family: monospace;
  padding-left: 2%;
}

.dropdown {
  width: 140px;
}

ul {
  /* background: darkorange; */
  list-style: none;
  margin: 0;
  padding-left: 0;
}

li {
  /* color: #fff;
    background: darkorange; */
  display: block;
  float: left;
  padding: .2rem .7rem;
  position: relative;
  text-decoration: none;
  transition-duration: 0.5s;
}

li a {
    /* color: #fff; */
    color: black;
  }

ul li a:hover {
    /* color: rgb(210, 61, 61); */
    color: white;
}


li:hover,
li:focus-within {
  /* background: red; */
  /* background: gainsboro; */
  cursor: pointer;
}

li:focus-within a {
  outline: none;
}

ul li ul {
  /* background: orange; */
  background: rgb(99, 99, 99, 0.9);
  visibility: hidden;
  opacity: 0;
  min-width: 5rem;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: .65rem;
  left: 0;
  display: none;
  z-index: 9;
}

ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
  visibility: visible;
  opacity: 1;
  display: block;
}

ul li ul li {
  clear: both;
  width: 100%;
}