/* (A) WHOLE PAGE */
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}

/* (B) FIRST LEVEL */
.menu {
  display: flex;
  background: #5b93ba;
}
.menu a, .mGrp {
  position: relative;
  color: #fff;
  padding: 15px;
  display: block;
  width: 100%;
  text-decoration: none;
}
.menu a:hover, .mGrp:hover {
  cursor: pointer;
  background: #5f0c08;
}

/* (C) SECOND LEVEL DROP-DOWN */
/* (C1) DROP-DOWN ITEMS */
.mItems {
  width: 100%;
  background: #333;
  position: absolute;
  top: 100%; left: 0;
  display: none;
}
.mGrp:hover .mItems { display: block; }
.mItems a:hover { background: #8c1f1f; }

/* (C2) ADD ICON */
.mGrp::after {
  content: "\25BA";
  position: absolute;
  top: 15px;
  right: 10px;
  transition: transform 0.3s;
}
.mGrp:hover::after { transform: rotate(90deg); }

/* (D) RESPONSIVE - SINGLE COLUMN ON SMALL SCREEN */
@media screen and (max-width: 640px) {
  .menu { flex-wrap: wrap; }
  .menu a, .mGrp {
    border-bottom: 1px solid #262626;
  }
  .mItems {
    margin-top: 10px;
    position: static;
  }
}