Tem como passar meu menu dropdow para um de 3 lines ☰, mas, só q

Não consigo fazer isso, pois, ainda sou leigo no designe responsivo. Seria grato quem me ajudar.

meu código:

<div class="nav">
 <div class="menu">
 <ul>
 <li><a href="Index.html">Home</a>
 </li>
 <li> <a href="#">Games</a>
 <ul>
 <li><a href="#">Últimas Noticías</a>
 </li>
 <li><a href="#">Gameplays</a>
 </li>
 <li><a href="#">Reviews</a>
 </li>
 <li><a href="#">Dicas</a>
 </li>
 <li><a href="#">Trailers</a>
 </li>
 </ul>
 </li>
 <li> <a href="#">Downloads</a>
 <ul>
 <li><a href="#">Games</a>
 </li>
 <li><a href="#">Editor de Imagens</a>
 </li>
 <li><a href="#">Editor de Áudio e Vídeo</a>
 </li>
 <li><a href="#">Segurança</a>
 </li>
 <li><a href="#">Sistemas Oprecionais</a>
 </li>
 <li><a href="#">Os Mais Baixados</a>
 </li>
 </ul>
 </li>
 <li> <a href="#">Mobile</a>
 <ul>
 <li><a href="#">Últimas Notícias</a>
 </li>
 <li><a href="#">Android</a>
 </li>
 <li><a href="#">IOS</a>
 </li>
 <li><a href="#">Windows Phone</a>
 </li>
 <li><a href="#">Dicas</a>
 </li>
 </ul>
 </li>
 <li> <a href="#">Internet</a>
 <ul>
 <li><a href="#">Últimas Notícias</a>
 </li>
 <li><a href="#">Redes Socias</a>
 </li>
 <li><a href="#">Dicas</a>
 </li>
 </ul>
 </li>
 <li> <a href="#">Diversão</a>
 <ul>
 <li><a href="#">Filmes</a>
 </li>
 <li><a href="#">Animes/desenhos</a>
 </li>
 <li><a href="#">Memes</a>
 </li>
 <li><a href="#">Histórias bisarras</a>
 </li>
 </ul>
 <li> <a href="#">TI</a>
 <ul>
 <li><a href="#">Últimas Notícias</a>
 </li>
 <li><a href="#">Progamção</a>
 </li>
 <li><a href="#">Tutorias</a>
 </li>
 </ul>
 </li>
 </ul>
 </div>

</div>
 Código css:

.nav{
 width:100%;
 height:42px;
background-color:#4682B4;
font-family:arial;
font-size:1.000em;
color:#fff;
 float:left;
}
.menu{
margin: 0 auto;
 width: 100%;
margin-left:11.23046875%;
 text-align: left;
}

.nav ul {

 list-style-type: none;
 padding: 0;
 margin: 0;
 position:relative;
 min-width: 200px;
z-index:99;
}

.nav ul li{

 display: inline-block;
}

.nav ul li:hover{

 background-color: #000;
}

.nav ul li a, visited{

 color: #fff;
 display: block;
 padding: 0.813em;
 text-decoration: none;
}

.nav ul li:hover ul{

 display: block;
}

.nav ul ul {

 display:none;
 position:absolute;
background-color: #222;
}

.nav ul ul li {

 display: block;
}

.nav ul ul li a:hover{

 color: #fff;
}