/* Variables */
:root {
  --main-active-link-color: #333; /* active link color */
  --main-link-color: #FFFFFF;
  --submenu-width: 224px;
  --submenu-font-size: .9rem;
  --submenu-font-color: #FFFFFF;
  --submenu-item-padding: 16px;
  --submenu-bkg: #000000;
  --submenu-highlight: gray;
  --submenu-two-highlight: darkgray;
  --submenu-border-left-color: #FFFFFF;
  --submenu-border-bottom-color: #FFFFFF;
}

/* Menu item label, typically an LI or DIV */
#menu {
  position:relative;
  background-color: transparent;
  z-index: 1000;
}

/*Top Menu Items*/
#menu ul { 
  list-style:none; 
  margin:0; 
  padding:0; 
  position:relative; 
}

#menu ul li {
  padding:0;
  position:relative;
}

/*Submenu Items*/
#menu ul ul {
  display: none; 
  position: absolute; 
  top: 43px; /* Offsets from the topmost (first) menu label, note: in HTML there also is an empty LI to fill in the gap, if not using a gap between min menu label and menu top then remove. Alternatively adjust padding on main menu label so there is no white space between them. */
  width: var(--submenu-width); /* Sets with of the menu */
}
#menu ul ul li {
  width: 100%; 
  background: var(--submenu-bkg);
}

#menu ul li a {
  display:block;
  margin:0;
  padding-left: 24px;
  padding: var(--submenu-item-padding); 
  background-color: transparent;
}

#menu ul ul li a, #menu ul li.active li a, #menu ul li:hover ul li a, #menu ul li.hover ul li a { 
  font-size: var(--submenu-font-size);
  color: var(--submenu-font-color); 
  cursor: pointer;
  border-bottom: 1px solid var(--submenu-border-bottom-color); /*submenu item horizontal lines*/ 
  padding-left: 24px;
}

#menu ul li a:hover {
  color: var(--main-active-link-color) !important; 
}

#menu ul ul li a:hover {
  color: var(--submenu-font-color) !important; 
}

#menu ul ul li:hover,
#menu ul li.active ul li:hover,
#menu ul li:hover ul li:hover,
#menu ul li.hover ul li:hover { /* This line is required for IE 6 and below */
  background: var(--submenu-highlight);
}

#menu ul li ul li ul li {
  background: var(--submenu-highlight) !important;
}

#menu ul li ul li ul li:hover {
  background: var(--submenu-two-highlight) !important;
}

#menu ul li ul li:hover {
  background: var(--submenu-bkg);
}

/* Show the submenus on hover */
#menu ul li:hover > ul,
#menu ul li.hover > ul
{ 
  display:block;
}

#menu ul ul ul{
	display: none; 
  position: absolute; 
  left: 100%; 
  top:0;
  border-left: .1rem solid var(--submenu-border-left-color); 
}

#menu ul li ul li p.arrow {
  display: inline-block;
  float: right;
  /* to hide this either remove the HTML or ucomment display below */
  /* display: none; */
}