/* HTML Nav Styles */
nav {
	position: fixed;
	left: 2px;
    top: 2px;
	z-index: 200000;
}

nav menuitem {
   position:relative;
   display:block;
   opacity:0;
   cursor:pointer;
   font-family: 'Arial', sans-serif;
}

nav menuitem > menu {
   position: absolute;
   pointer-events:none;
}

nav > menu {
    display:flex;
}

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;
}

nav a {
   background:#75F;
   color:#FFF !important;
   opacity: 0.7;
   text-decoration: none !important;
   font: 12px "Lucida Grande";
   transition: background 0.5s, color 0.5s, transform 0.5s;
   margin:0px 6px 6px 0px;
   padding:10px 20px;
   box-sizing:border-box;
   border-radius:3px;
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
   position:relative;
}

nav a:hover:before {
   content: '';
   top:0;
   left:0;
   position:absolute;
   /*
   background:rgba(0, 0, 0, 0.2);
*/
   background:rgba(100, 0, 100, 0.3);
   width:100%;
   height:100%;
}

nav > menu > menuitem > a + menu:after {
   content: '';
   position:absolute;
   border:10px solid transparent;
   border-top: 10px solid white;
   left:12px;
   top: -30px;
}
nav menuitem > menu > menuitem > a + menu:after {
   content: '';
   position:absolute;
   border:10px solid transparent;
   border-left: 10px solid white;
   top: 10px;
   left:-180px;
   transition: opacity 0.6s, transform 0s;
}
/*
nav > menu > menuitem > menu > menuitem {
   transition: transform 0.6s, opacity 0.6s;
   transform:translateY(150%);
   opacity:0;
}
*/
nav > menu > menuitem > menu > menuitem {
   transition: transform 0.6s, opacity 0.6s;
   transform:translateY(50%);
   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 > menu > menuitem {
   transition: transform 0.6s, opacity 0.6s;
   transform:translateX(25px) translateY(0%);
   opacity: 0;
} 
menuitem > menu > menuitem:hover > menu > menuitem,  
menuitem > menu > menuitem.hover > menu > menuitem {  
   transform:translateX(0) translateY(0%);
   opacity: 1;
}