/* Dymanic CSS Menu
 * based upon https:https://www.w3schools.com/csS/css_navbar_horizontal.asp
 * set top game menu with class "menubar"
 * define container (nav/div) with class "menubar" and then build menu in nested ul
 *
 * <nav class="menubar">
 *   <ul>
 *     <li><a href="/main">Main</a></li>
 *     <li><a href="#">Maintenance</a>
 *       <ul>
 *         <li><a href="/groups">Groups</a></li>
 *         <li><a href="/meetings">Meetings</a></li>
 *       </ul>
 *     </li>
 *     ...
 *   </ul>
 * </nav>
 * */

:root {
	--menubar_bg: #000070;
	--menubar_bg_hover: #202080;
	--menubar_bg_submenu: #303090;
	--menubar_c: white;
	
}

.menubar {
	clear: both;
}

.menubar > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--menubar_bg);
}

.menubar > ul > li {
  float: left;
}

/* highlight menu item being hovered */
.menubar li:hover {
  background-color: var(--menubar_bg_hover);
}

.menubar a {
	color: var(--menubar_c);
	display: inline-block;
	text-align: center;
	padding: 8px 16px;
	text-decoration: none;
}

.menubar a:hover {
	font-weight: bold;
}

/* set all sub menus (ul) to hidden and absolute */
.menubar li > ul {
  display: none;
  position: absolute;
  background-color: var(--menubar_bg_submenu);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
  z-index: 9999;
}

/* when we hover over a in top level or over drop down - show */
.menubar li > a:hover + ul, .menubar li > ul:hover {
  display: block;
}