Menu responsivo

Então gente eu to com um menu mas não consigo deixar ele responsivo, eu sei q existe varios outros menus responsivo na internet mas meu site ja ta pronto so falta a parte do menu conto com a ajuda de vcs

HTML

<!-- Barra de Menu -->

	<div class="container">

	    <nav class="menu">

	        <ul>

	            <li><a href="index.php">Home</a></li>

	            <li><a href="agenda.php">Agenda</a></li>

	            <li><a href="departamento.php">Departamento</a></li>

	            <li><a href="https://www.flickr.com/photos/142117425@N02/" target="blanck">Fotos</a></li>

	            <li><a href="#localizacao">Localização</a></li>

	            <li><a href="https://www.facebook.com/deives.duarte.9"  target="blanck" class="fa fa-facebook"></a></li>

	            <li><a href="#" target="blanck" class="fa fa-twitter"></a>

	            <li><a href="#" class="fa fa-youtube"></a>

	        </ul>

	    </nav>

	</div>

	 

	CSS

	.container {

	  position: absolute;

	  margin: 20px;

	  width: auto;

	}

	.menu{

	width:100%;

	height:54px;

	background-color: #333;

	font-family:'Arial';

	}

	.menu ul{

	list-style:none;

	position:relative;

	background-color: #333;

	 /*css custom*/

	  display: flex;

	  flex-wrap: wrap;

	  padding-left: 0px;

	}

	.menu ul li{

	width:50px auto;

	float:left;

	}

	.menu a{

	padding:15px;

	display:block;

	text-decoration:none;

	text-align:center;

	color:#fff;

	}

	.menu ul ul{

	position:absolute;

	visibility:hidden;

	}

	.menu ul li:hover ul{

	visibility:visible;

	}

	.menu a:hover{

	background-color:#f4f4f4;

	color:#555;

	}

	.menu ul ul li{

	float:none;

	border-bottom:1px solid #ccc;

	}

	.menu ul ul li a{

	background-color:#069;

	}

	@media screen and (max-width: 640px){

	.menu ul li{

	        width: 100%;

	        text-align:center;

	    }

	    .menu a{

	        text-align:center;

	    } 

	}