nav {
	width:100%;
	font-family:Verdana, Calibri, sans-serif;
	margin: 0px;
	padding: 0px;
	background-color: #444444;
}

nav > ul{
	margin: 0px;
	padding: 0px;
}

nav li{
	list-style-type:none;
}

nav > ul > li{
	float: left;
	position: relative;
}

nav > ul::after{
	content:"";
	display: table;
	clear: both;
}

.submenu {
	display: none;
}

nav input[type=checkbox]{
	display: none;
}
nav label{
	display: none;
}
nav a{
	display: inline-block;
	text-decoration: none;
}
nav > ul > li > a{
	padding: 10px 12px;
	color:#FFF;
}
nav > ul > li:hover a{
	
	background-color: #e6e6e6;
	transition: all 0.3s ease;
}	

nav li:hover .submenu{
	display: inline-block;
	position: absolute;
	top: 75%;
	left: 0px;
	padding: 0px;
	z-index: 1000;
}
.submenu li {
	border-bottom: 1px solid #FFF;
	}

.submenu li a{
	padding : 15px 30px;
	font-size: 12px;
	width: 150px;
}

.item2:hover{
	border-bottom: 1px solid #CCC;
	background-color:#FFF;
}
.item2 .submenu li:hover{
	display:block;
}

nav input[type=checkbox]:checked ~ ul{
	display: block;
}


@media screen and (max-width: 780px){
	
	.menu-mobile{
		display: block;
		clear: both;
		color: #FFF;
		background-color: #444444;
		text-align: center;
		padding: 12px 0px;
		font-size:14px;
		font-weight:bold;
		}
		
		nav {
			background-color: #CCC;
		}
		
		nav ul{
			display:none;
		} 
				
		nav ul li, nav ul li a{
			width:100%;
			text-align: center;
			font-weight:bold;
			border-bottom: 0.5px solid #FFF;
			line-height:25px;
		}	

		nav ul li .titre {
			font-size: 14px;
			color: #000;
		}
			
		nav ul li a, nav ul li:hover a{
			padding:10px 0px;
			width: 100%;
		}
		nav li:hover .submenu {
			display: block;
			position: static;
			margin-top:0px;
			
		}
			
}