SIMPLEST CSS STYLES TO TURN A REGULAR ul > li MENU INTO A RESPONSIVE DROP DOWN, while keeping the first item displayed as the first option, with a right & down switching triangle indicator after it. Just add #menu-container to the container div or whatever or change the ID selector below to match an existing one.

mobile-drop-down-menu-pure-css.css

/* SIMPLEST CSS STYLES TO TURN    */
/* A REGULAR ul > li MENU INTO A  */
/* RESPONSIVE DROP DOWN,          */
/* while keeping the first item   */
/* displayed as the first option, */
/* with a right & down switching  */ 
/* triangle indicator after it.   */
/*             ===                */
/* Just add #menu-container to    */
/* the container div or whatever  */
/* or change the ID selector      */
/* below to match an existing one */

#menu-container ul li {
  width: 100%;
  padding: 6px 0;
}
#menu-container ul:hover li {
  display: block !important;
}
#menu-container ul li:not(:first-child) {
  display: none;
}
#menu-container ul li:first-child:after {
  content: '\25b6';
  color: white;
  line-height: 20px;
}
#menu-container ul:hover li:first-child:after {
  content: '\25bc';
  font-size: 10px;
  line-height: 20px;
}