@keyframes fade {
     0% {
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
 }


 nav ul ul {
     display: none;
     box-shadow: 2px 2px 6px #000;
 }

 nav > ul > li {
     display: inline-block;
 }

 nav > ul > li {
     position: relative;
 }

 nav > ul {

    
     list-style: none;
     position: relative;
     z-index: 3;

 }

nav > ul { line-height:80px;}

 /* top level hover*/
 nav > ul > li:hover {

     transition: all .5s ease-out;
     background: rgba(255, 255, 255, 0.3);
 }
li.nr:hover{ background: none;}

 nav a {

     padding: 10px 30px;
     color: #fff;
     text-decoration: none;
 }



 /* submenu */
 nav ul li:hover > ul {
     display: block;
     animation: fade .3s ease-out;
     background: #fceecd;
 }


 nav ul ul {
     list-style: none;
     width: auto;
     position: absolute;
     top: 100%;
     line-height:30px;
     z-index: 1;

 }


 nav ul ul a {
     color: #000;
    padding:10px 30px;
     display:block;
 }

 nav ul ul:hover li a:hover {
     transition: all .3s ease-out;
     background: #e5c8a7;
      
 }

nav ul ul ul{
    left: 120px;
    top:50px;
}

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

     nav ul ul {
         width: auto;
         max-width: 200px;
        
     }
     nav a {padding: 10px 12px;}
     
     nav ul ul ul{
    left: 50px;
    top: 100px
}
 }