/* newmenu.css */

/* ===== TOP-LEVEL MENU BAR ===== */
.menu-bar {
    background-color: #031D72;
    display: flex;
    padding: 0;
    margin: 0;
    width: 101%;
    list-style: none;
    font-size: 145%;
    line-height: 40%;
    font-family: "Times New Roman", serif;
    font-variant: small-caps;
    text-shadow: 1px 1px 2px black, 0 0 25px black, 0 0 5px black;
}

.menu-bar > li {
    position: relative;
}

.menu-bar > li > a {
    color: gold;
    padding: 12px 18px;
    display: block;
    text-decoration: none;
    text-shadow: 1px 1px 2px black, 0 0 25px black, 0 0 5px black;
}

.menu-bar > li > a:hover {
    background-color: darkred;
    color: gold;
    text-shadow: 1px 1px 2px black, 0 0 25px black, 0 0 5px black;
}

/* ===== FIRST-LEVEL SUBMENU ===== */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: darkblue;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 95%;
    min-width: 320px;
    border: 1px solid #222;
    z-index: 2;
    line-height: 40%;
    font-family: "Times New Roman", serif;
}

.submenu li {
    position: relative;   /* needed for second-level submenu */
}

.submenu li a {
    color: white;
    padding: 10px 14px;
    display: block;
    text-decoration: none;
}

.submenu li a:hover {
    background-color: blue;
    color: gold;
    text-shadow: 1px 1px 2px black, 0 0 25px black, 0 0 5px black;
}

/* ===== SECOND-LEVEL SUBMENU (fly-out) ===== */
.submenu .submenu {
    top: 0;               /* aligns with parent item */
    left: 100%;           /* fly-out to the right */
    background-color: darkblue;
    min-width: 320px;
    border: 1px solid #222;
    line-height: 40%;
}

/* ===== SHOW SUBMENUS ON HOVER ===== */
.menu-bar li:hover > .submenu,
.submenu li:hover > .submenu {
    display: block;
}