Gostaria de deixar esse menu responsivo na vertical mas não consigo

Gostaria q pudessem me ajudar

HTML

	<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:auto;

	    background-color: #333;

	    font-family:'Arial';

	}

	.menu ul{

	    list-style:none;

	    position:relative;

	    background-color: #333;

	}

	.menu ul li{

	    width: auto;

	    height:auto;

	    float:left;

	}

	.menu a{

	    padding:15px;

	    text-decoration:none;

	    text-align:center;

	    color:#fff;

	}

	.menu a:hover{

	    background-color:#f4f4f4;

	    color:#555;

	}