nav
{
position:fixed;
top:2em;
left:0;
width:9.5em;
background-color:rgba(0,0,0, 1);
padding:0;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
}

@media only screen and (min-width:768px){
nav
{
height:100vh;
}
}

nav ul, nav > li
{
margin:0;padding:0;
list-style:none;
}

nav > ul >  li
{
background-color:rgba(255,255,255, 0.2);
}

.menujs
{
cursor:pointer;
}

nav > ul > li + li
{
color: white;
background-color:rgba(255,255,255, 0.2);
border-top:1px dashed rgba(255,255,255, 0.6);
}

nav > ul ul > li 
{
background-color:rgba(200,200,200,0.8);
margin:0;padding:0em;
list-style:none;
overflow: hidden;
}

nav > ul ul 
{
display:none;overflow: hidden;
-webkit-transition: max-height ease-in-out 0.5s;
-moz-transition: max-height ease-in-out 0.5s;
transition: max-height ease-in-out 0.5s;
}

.menu > li:hover ul, .menu >li:focus ul
{
display:block;-webkit-transition: max-height ease-in-out 0.5s;
-moz-transition: max-height ease-in-out 0.5s;
transition: max-height ease-in-out 0.5s;
}


nav > ul ul > li > a
{
color: black;
}

nav > ul ul > li + li
{
border-top:1px solid rgba(255,255,255, 0.2);
}

nav img, nav a, nav span
{
vertical-align:top;
display:inline-block;
height:1.5em;
line-height: 1.5em;
padding:.2em;
}

@media only screen and (max-width:768px){
nav
{
width:100%;
text-align:center;
padding:0;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
}

nav > ul
{
display:none;overflow: hidden;
-webkit-transition: max-height ease-in-out 0.5s;
-moz-transition: max-height ease-in-out 0.5s;
transition: max-height ease-in-out 0.5s;
}

.menu .accueil:hover + ul , nav > ul:hover, .menu .accueil:focus + ul , nav > ul:focus
{
display:block;-webkit-transition: max-height ease-in-out 0.5s;
-moz-transition: max-height ease-in-out 0.5s;
transition: max-height ease-in-out 0.5s;
}




nav img, nav a, nav span
{
padding:.5em;
}
}