/**
 * Design Shack Responsive Menu
 */


* {
	padding: 0;
	margin: 0;
	
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

/* MENU */
/* Version ordinateur */
#menu {
width: 100%;
height: auto;
background-color: rgba(4, 4, 64);
color: white;
}
#contenant_menu {
width: 90%;
height: auto;
margin-left: auto;
margin-right: auto;
}

#btn_menu { display: none; }

#menu label {
display: none;
width: 30px;
height: 30px;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 0px;
color: #333;
font-size: 20px;
}

#menu label:hover {
cursor: pointer;
color: rgba(4, 4, 64, 0.40);
transition:all 1s;
}

.menu ul {
margin: 0;
list-style: none;
padding: 0;
display: flex;
}

.menu a {
display: block;
padding: 15px 20px;
font-size: 14px;
text-transform: uppercase;
font-weight: 500;
color: white;
text-decoration: none;
}

.menu ul >li > ul {
position: absolute;
background-color: rgba(4, 4, 64, 0.60);
display: none;
width: 210px;
z-index: 10000;
}

.menu li a:hover { color: white; }
.menu ul li { transition: 0.5s;}
.menu ul >li > ul > li{ border-bottom: #ccc solid 1px; }
.menu ul li:hover { background-color: rgba(4, 4, 64, 0.60); }
.menu ul li:hover > ul { display:block; }



/* Version mobile */
@media only screen and (max-width: 468px) {

#menu { background-color: #eaeaea; font-size: 12px; }

#contenant_menu {
width: 100%;
height: auto;
margin-bottom: 50px;
}

#menu label { display: block; }
.menu ul { display: block; }
.menu ul > li { width: 100%; }
.menu ul >li > ul { width: 100%; }
.menu ul >li > ul > li{ border-bottom: 0px; }

.menu {
background-color: rgba(4, 4, 64, 0.60);
width: 100%;
margin-top: -100%;
transition:all 0.3s;
display: none;
<nav style="font-size: 12px;">
}    

.menu li {
border-top: 1px solid #fff;
width: 100%;
}
.menu ul >li >ul {
position: relative;
background-color: rgba(4, 4, 64, 0.60);
display: none;
transition: all 2s;
}

#btn_menu:checked ~ .menu {
margin: 0px;
display: block;
}

/* MENU */