/* (A) NAVIGATION BAR */
.ddmenu { display: flex; }

/* (B) FIRST LEVEL ITEMS */
.ddmenu a, .ddmenu .ddgroup {
  width: relative;
  padding: 15px;
  color: #fff;
  text-decoration: none;
  background: #585858;
}
.ddmenu a:hover, .ddmenu .ddgroup:hover {
  color: #ffe945;
  background: #3a3a3a;
  cursor: pointer;
}

/* (C) SECOND LEVEL ITEMS */
.ddmenu .ddgroup { position: relative; }
.ddsub {
  width: relative;
  position: absolute;
  top: 100%; left: 0;
  display: none;
}
.ddsub a {
  display: block;
  box-sizing: border-box;
}
.ddgroup:hover .ddsub { display: block; }

/* (D) DROPDOWN ARROW */
.ddgroup::after {
  content: "\27A4";
  position: absolute;
  top: 13px; right: 10px;
  transition: transform 0.2s;
}
.ddgroup:hover::after {
  transform: rotate(90deg);
}

/*  (E) ON SMALL SCREENS */
@media screen and (max-width: 640px) {
  .ddmenu { flex-wrap: wrap; }
  .ddsub {
    position: static;
    margin-top: 10px;
  }
}

/* (X) DOES NOT MATTER */
html, body { font-family: arial, sans-serif; }