@charset "UTF-8";

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul li {
  display: inline-block;
  position: relative;
}
li ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 10;
  padding: 0;
  margin: 0;
}
ul li a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #fff;
}
/* Eliminamos el gris al hacer hover */
ul li a:hover {
  background: transparent;
}
li:hover ul {
  display: block;
}
li:hover li {
  float: none;
}
li:hover a {
  background: transparent;
}
li ul li a {
  background-color: #333;
  padding: 10px 20px;
  color: #fff;
  width: 180px;
}
/* Eliminamos el gris al hacer hover dentro del submenú */
li ul li a:hover {
  background-color: transparent;
}
.arrow {
  margin-left: 5px;
  font-size: .8em;
  transition: transform 0.3s ease;
}
li:hover .arrow {
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  ul li {
    display: block;
    margin-bottom: 0;
  }
  li ul {
    position: static;
    display: none;
  }
  li:hover ul {
    display: block;
  }
  ul li a {
    padding: 5px 10px;
  }
  li ul li a {
    padding: 5px 10px;
  }
}

@media screen and (min-width: 1024px) {
  ul {
    height: 300px;
  }
}