nav {
  background: rgb(249, 131, 249);
  display: flex;
}

.menus {
  display: flex;
  list-style: none;
}

.item {
  position: relative;
  display: flex;
  gap: 0.5rem;
  padding: 1rem 2rem;
  text-decoration: none;
  cursor: pointer;
}

.item:hover {
  background: #eee;
}

.item:active {
  background-color: #ddd;
}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  flex-direction: column;
  width: 15rem;
  background-color: #f9ee85;
}


.submenu .submenu--appear-on-bottom {
  top: 5rem;
  right: 0;
  background: greenyellow;
}

.item-has-submenu:hover>.submenu {
  display: flex;
}