html {
      font-family: "Poppins";
}
 
body {
      margin: 0;
      padding: 0;
}
 
ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
      background: #e3e3e3;
      position: relative;
}
 
ul li {
      display: inline-block;
}
 
ul li a {
      color: #292929;
      text-decoration: none;
      padding: 15px;
      display: block;
}
 
ul li:hover {
      background: lightgrey;
}
 
ul ul {
      position: absolute;
      min-width: 200px;
      background: lightgrey;
      display: none;
}
 
ul ul li {
      display: block;
      background: #e3e3e3;
}
 
ul li:hover ul {
      display: block;
}
 
ul li i {
      color: #292929;
      float: right;
      padding-left: 20px;
}
 
nav div {
      background: lightgrey;
      color: #292929;
      font-size: 24px;
      padding: 0.6em;
      cursor: pointer;
      display: none;
}
 
@media(max-width: 768px) {
      nav div {
            display: block;
      }
 
      ul {
            display: none;
            position: static;
            background: #e3e3e3;
      }
 
      ul li {
            display: block;
      }
 
      ul ul {
            position: static;
            background: #e3e3e3;
      }
}