nav * {
   margin: 0;
   padding:0;
   z-index: 2;
}

 nav menuitem {
    position:relative;
    display:flex;
    opacity:0;
    cursor:pointer;
 }
 
 nav menuitem > menu {
    position: absolute;
    pointer-events:none;
    margin-left: 185px;
 }
 nav > menu { display:block; }
 
 nav > menu > menuitem { pointer-events: all; opacity:1; }
 menu menuitem a { white-space:nowrap; display:block; }
    
 menuitem:hover > menu {
    pointer-events:initial;
 }
 menuitem:hover > menu > menuitem,
 menu:hover > menuitem{
    opacity:1;
 }
 nav > menu > menuitem menuitem menu {
    transform:translateX(100%);
    top:0; right:0;
 }
 
 /* User Styles Below Not Required */
 
 nav { 
    margin-top: 20px;
    margin-left: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #f3f3bf; 
 }
 
 nav a {
    background:#639c46;
    color:#f3f3bf;
    width: 180px;
    transition: background 0.5s, color 0.5s, transform 0.5s;
    margin:0px 4px 4px 0px;
    padding:3px 0px 3px 10px;
    box-sizing:border-box;
    border:1px solid #3c6627;
    border-radius:10px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    position:relative;
 }

 nav a:link {color:#f3f3bf;}
 nav a:visited {color:#f3f3bf;}
 nav a:hover {color:#4c4a43; border:1px solid #4c4a43; background: #ccc9b5;}
 .oops:hover {color:maroon; border:1px solid maroon; background:pink; cursor: not-allowed; }


  
 nav > menu > menuitem > menu > menuitem{
    transition: transform 0.6s, opacity 0.6s;
    transform:translateY(150%);
    opacity:0;
 }
 nav > menu > menuitem:hover > menu > menuitem,
 nav > menu > menuitem.hover > menu > menuitem{
    transform:translateY(0%);
    opacity: 1;
 }
 
 menuitem > menu > menuitem > menu > menuitem{
    transition: transform 0.6s, opacity 0.6s;
    transform:translateX(195px) translateY(0%);
    opacity: 0;
 } 
 menuitem > menu > menuitem:hover > menu > menuitem,  
 menuitem > menu > menuitem.hover > menu > menuitem{  
    transform:translateX(0) translateY(0%);
    opacity: 1;
 }