/* Menu based on https://www.cssscript.com/demo/create-a-multi-level-drop-down-menu-with-pure-css/ */

.navBar /* . */
{
 position:absolute;
 top:3px; /* 0.5em */
 left:3px; /* 0.5em */
 /* border: 1px red solid; */ /* test */
 z-index: 10001; /* to be on top of mShadeBox */
 background: #e50056; /* new */
 color: #FFFFFF; /* new */
 font-size: 80%; /* new */
}
body > .navBar { position:fixed; } /* . */

.navBar li ul li { border-top: 0; } /* top-level UL */
.navBar > li { border-right: 3px solid #e50056; } /* same colour as UL BG below; without '>', submenu items have RH border too - which also looks ok */
.navBar:hover > li { border-right: 3px solid #324897; }

#mShadeBox /* # */
{
 position: absolute;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
 visibility: hidden; /* display: none; */
 background-color: #3283c5; /* #000088 */
 filter: alpha(opacity=60); /* 80 */
 -moz-opacity: .60;
 opacity: .60;
 z-index: 10000;
}
body > #mShadeBox { position:fixed; } /* # */

.navBar:hover + #mShadeBox { visibility: visible; } /* .navBar; display: block; inline-block; +: #mShadeBox must be element after navBar UL */

ul {
 list-style: none;
 padding: 0;
 margin: 0;
 background: #e50056; /* #6600FF */
 color: #FFFFFF; /* new */
}

ul li {
 display: block;
 position: relative;
 float: left;
 background: #e50056; /* #6600FF */
 color: #FFFFFF; /* new */
 font-weight:bold;
}

ul li:hover {
 background: #324897; /* #8800FF */
 z-index: 10002; /* for when small screen and menu on 2 lines, say */
}

/* This hides the dropdowns */
li ul { display: none; }

ul li a {
 display: block;
 padding: 0.3em;
 text-decoration: none;
 white-space: nowrap;
 color: #FFFFFF; /* #FFFF00 */
}

/* Display the dropdown */
li:hover > ul {
 display: block;
 position: absolute;
}

li:hover li { float: none; }

/* li:hover a { background: #0000CC; } */ /* #1bc2a2 */

/* li:hover li a:hover { background: #000088; } */ /* #2c3e50 */

/* Display second level dropdowns to the right of the first level dropdown */
ul ul ul {
 left: 100%;
 top: 0;
}

/* Simple clearfix */
ul:before,
ul:after {
 content: " ";
 display: table;
}
ul:after { clear: both; } /* Without these, the navigation menu bar is only as long as the buttons on it (even if replaced with a 'clear:both' div) */