div.menu {
	display: none; /* Default menu display is hidden - the top menu must be explicitly displayed (or equivalently, marked with class 'top') */;
	color: green; /* Text menu color */;
	border-radius: 20px;
	background-color: #FFFFF0;
	border: 2px solid #FFCC00;
/* Use rgba(0,0,0,0) to see background, or set a specific color or gradient (using rgba(0,0,0,0) instead of 'transparent' or not specifying at all eliminates an IE bug */font-weight: bold;
	font-size: 1em;
}
div.top {
	display: flex;					/* The top-level menu is usually visible to start, so mark that one with .top, or explicitly show */
    align-items: center;
    justify-content:space-around;
}
div.top.hmb > div.item {					/* If top-level menu is horizontal, display the items as inline-block to allow horizontal stacking */
	display: inline-block;
}
div.menu > div.item {						/* Common settings for all menu items (including sub-menus) */
	white-space: nowrap;					/* Make sure no word-wrapping */
	cursor: pointer;						/* Finger pointer instead of arrow pointer */
	padding: 5px 10px;						/* Use this to put spacing between menu items...  IMO better than margin because you don't have to hover directly on top of the text */
	margin: 0;								/* No spacing between menu-item divs (spacing is provided via padding above) */

	border-top: 4px solid transparent;		/* This example menu will use a border-top highlight, so put a transparent border there so the menu items don't move as you hover */
}
div.menu > div.item:hover {					/* Common settings for all menu items when hovered (including sub-menus): */
	 color: yellow;						/* Text menu color */
	border-radius: 20px;
	background-color: green;
	border: 2px solid #FFCC00;	
    
    /*background-color: #262626;				/* Give a little bit of shading to hovered item */
	/*border-top: 4px solid #009ac7;			/* And give a nice clear blu-ish highlight above the item */
}

/*  Adjust the exact display and positions of sub-menus  */
div.hmb > div.item:hover > div.vmb {		/* Horizontal menu w/ vertical sub-menu */
	position: absolute;						/* Allows the display of sub-menu to not cause the source menu item to change width */
	display: block;							/* Display the sub-menu beneath the menu item */
	margin-top: 5px;						/* Move the sub-menu down 5px (for exact alignment, this should match the first 'padding' value in "div.menu > div.item".  If too large, menu may disappear as mouse moves */
	margin-left: -10px;						/* Move the sub-menu left 10px (for exact alignment, this should be the negative of the first 'padding' value in "div.menu > div.item".  */
}

div.hmb > div.item:hover > div.hmb {		/* Horizontal menu w/ horizontal sub-menu */
	position: absolute;						/* Allows the display of sub-menu to not cause the source menu item to change height, and with a dynamic width */
	display: block;							/* Display the sub-menu beneath the menu item */
	margin-top: 5px;						/* Move the sub-menu down 5px (for exact alignment, this should match the first 'padding' value in "div.menu > div.item".  If too large, menu may disappear as mouse moves */
}

div.vmb > div.item:hover > div.vmb {		/* Vertical menu w/ vertical sub-menu */
	position: absolute;						/* Allows the display of sub-menu to not cause the source menu item to change height */
	display: inline-block;					/* Display the sub-menu to the right of the menu item */
	margin-left: 6px;						/* Move the sub-menu right 10px (for exact alignment, this should match the second 'padding' value in "div.menu > div.item".  If too large, menu may disappear as mouse moves */
}

div.vmb > div.item:hover > div.hmb {		/* Vertical menu w/ horizontal sub-menu */
	position: absolute;						/* Allows the display of sub-menu to not cause the source menu item to change height */
	display: inline-block;					/* Display the sub-menu to the right of the menu item */
	margin-left: 6px;						/* Move the sub-menu right 6px (for exact alignment, this should match the second 'padding' value in "div.menu > div.item".  If too large, menu may disappear as mouse moves */
}

div.item:hover > div.hmb > div.item {		/* Horizontal hovered menu items */
	display: inline-block;					/* Display as inline-block to allow horizontal stacking */
}

div.menu > div.item > a {					/* A elements inside the menu items */
	color: inherit;							/* No special coloring - take the same color style as the div */
	text-decoration: none;					/* No special underlining typical of A */
}