/* main menu */
nav {
	margin:auto; width:80%;
	font-family:Calibri, Arial, Helvetica, sans-serif;
	margin-top:155px; 
}
nav ul { list-style:none; padding: 0 4px;
}/*add background color here if menu will be different from body bg color*/
nav ul::after {content:"_"; clear:both; visibility:hidden; display:block; height:0px;
}
nav ul li {float:left; position:relative;
}
nav ul li a {display:block; color:#663399; text-decoration:none; padding: 0px 24px 0px; font-size:18px; -webkit-transition: 0.25s ease-out;
}
nav ul li:hover > a { background:#CC99FF;
} /*Add color here if changing the text color for rollovers. I am leaving them purple.*/
nav ul li:active > a { color:#FFF;
} 

/* sub menu */
nav ul li > ul:before {
  content: "";
  border-style:solid;
  border-width: 0 9px 9px 9px;
  border-color: transparent transparent #FFCCFF transparent;
  width:0;
  height:0;
  position:absolute;
  left:15px;
  top: 5px;
}
/*above code makes the little arrow*/
nav ul li > ul { position:absolute; left:16px; top:80%; padding-top: 12px; background:none; width: 150px; z-index:-9999; opacity: 0; -webkit-transition: 0.25s ease-out; }
nav ul li:hover > ul { display:block; z-index:100; opacity: 1;; top:95%}
nav ul li > ul li:first-child {border-radius: 4px 4px 0 0; padding-top: 3px;}
nav ul li > ul li:last-child {border-radius: 0 0 4px 4px; }
nav ul li > ul li { padding:0 3px 3px; background:#FFCCFF; width:100%; }
nav ul li > ul li a {display:block; padding:6px 6px; border-radius: 2px; font-size:14px;}
nav ul li > ul li:hover > a {color: #FFF; background: #663399;
}
/*nav ul li > ul li.active > a {color: #FFF; background: #000000;} Not sure why I need this*/

/*sub sub menu*/
nav ul li > ul li > ul:before {
  content: "";
  border-style:solid;
  border-width: 0 9px 9px 9px;
  border-color: transparent transparent #FFCCFF transparent;
  width:0;
  height:0;
  position:absolute;
  left:0;
  top: 12px;
  -webkit-transform: rotate(270deg);
}
/*above code makes the little arrow*/
nav ul li > ul li > ul { top:0; left::90%; padding:0; padding-left:12px; -webkit-transition: 0.25s ease-out;
}
nav ul li > ul li:hover > ul { display:block; z-index:100; opacity: 1; top:0; left:100%;
}