dynamic menu css

/* Colours:
     #532F64 - Purple
     #98005D - Pink
     #7F004D - Cerise
     #EDEAEF - Pinky grey
     #C0B3C6 - Purply grey
     #C0C0C0 - Dark grey
*/

.custom_menu_container {
  background: #532F64;
  min-height: 30px;
  padding: 5px 10px 0px 10px;
  margin-bottom: 10px;
  position: absolute;
}

.custom_menu_container ul {
  display: block;
  list-style: none inside;
  z-index: 1;
}

/*   MENU LEVEL ONE   */
/* Purple background, white text. Highlight in pink */
.custom_menu_container > ul  { position: relative; }
.custom_menu_container > ul > li { font-weight: 500; float: left; zoom: 1; background: #532F64; }
.custom_menu_container > ul > li > a:hover { color: #7F004D; }
.custom_menu_container > ul > li > a:active { color: #7F004D; }
.custom_menu_container > ul > li > a { display: block; padding: 4px 8px; border-right: 1px solid #ffffff; }
.custom_menu_container > ul > li:last-child > a { border-right: none; } /* Doesn't work in IE */
.custom_menu_container > ul > li.hover, .custom_menu_container > ul > li:hover { background: #7F004D; position: relative; }
.custom_menu_container > ul > li.hover > a, .custom_menu_container > ul > li:hover > a { color: #ffffff; }

/*   MENU LEVEL TWO   */
/* Light pink background, purple text. Highlight with darker pink background, purple text */
.custom_menu_container > ul > li > ul {width: 250px; display: none; position: absolute; top: 100%; left: 0;}
.custom_menu_container > ul > li > ul > li { background: #EDEAEF; border-left: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0; border-bottom: 1px solid #ccc; float: none; padding-right: 5px; font-size:90%; }
.custom_menu_container > ul > li > ul > li:last-child { border-bottom: 1px solid #C0C0C0; }
.custom_menu_container > ul > li > ul > li > a { display: inline-block; padding: 4px 8px; border-right: none; width: 100%; color: #532F64; font-weight: 400; }  /* IE 6 and 7 Needs Inline Block */
.custom_menu_container > ul > li > ul > li.hover, .custom_menu_container > ul > li > ul > li:hover { background: #ffffff; position: relative; }
.custom_menu_container > ul > li > div > ul > li.hover > a, .custom_menu_container > ul > li > ul > li:hover > a { color: #532F64; }

/*   MENU LEVEL THREE   */
/* Light pink background, purple text. Highlight in darker pink background, bright pink text */
.custom_menu_container > ul > li > ul > li > ul {display: none; position: absolute; top: 0; left: 100%; }
.custom_menu_container > ul > li > ul > li > ul > li { background: #EDEAEF; border-left: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0; border-bottom: 1px solid #ccc; float: none; padding-right: 8px; font-size:80%; }
.custom_menu_container > ul > li > ul > li > ul > li:first-child { border-top: 1px solid #C0C0C0; }
.custom_menu_container > ul > li > ul > li > ul > li:last-child { border-bottom: 1px solid #C0C0C0; }
.custom_menu_container > ul > li > ul > li > ul > li > a { display: inline-block; padding: 4px 8px; border-right: none; width: 100%; color: #98005D; font-weight: 400; }  /* IE 6 and 7 Needs Inline Block */
.custom_menu_container > ul > li > ul > li > ul > li.hover, .custom_menu_container > ul > li > ul > li > ul > li:hover { background: #C0B3C6; position: relative; }
.custom_menu_container > ul > li > ul > li > ul > li.hover > a, .custom_menu_container > ul > li > ul > li > ul > li:hover > a { color: #98005D; }

/*   ADDITIONAL LEVELS   */
/* Hidden */
.custom_menu_container > ul > li > ul > li > ul > li > ul  { display:none; }