/* ************************************************************************
 *                                Menu
 **************************************************************************

Menu colours:
    - background:       #000080
    - background hover: #f60 (was #558)
    - foreground text:  white / #fff

This effect can be added to li:hover ... but it highlights all items in
the submenu as well.  See if you can fix that.

    text-shadow: 1px 1px 0 rgba(255,128,0,0.5), -1px -1px 0 rgba(255,128,0,0.5);

*/

div#menu {
    background: #000080;
    display: block;
    clear: both;
}

div#menu a {
    text-decoration: none;
}

div#menu nav {
    font-family: arial, helvetica, sans-serif;
    font-weight: bold;
}

div#menu ul {
    background: #000080;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

div#menu li {
    color: #fff;
    background: #000080;
    display: block;
    float: left;
    padding: 0.3rem 1.5rem;
    position: relative;
    text-decoration: none;
    transition-duration: 0.5s;
}

div#menu li a {
    color: #fff;
}

div#menu li:hover,
div#menu li:focus-within {
    /* #558 is the lighter grey-blue I used to use for the highlighted menu
     * entry ... but (without any accessibility testing) I decided #f60
     * (a bright orange) was much more visible - if uglier.
     */
    background: #f60;
}

div#menu li:focus-within a {
  outline: none;
}

div#menu ul li ul {
    visibility: hidden;
    opacity: 0;
    min-width: 5rem;
    position: absolute;
    transition: all 0.5s ease;
    margin-top: 0.3rem;  /* must match vert padding on 'div.menu li' above */
    left: 0;
    display: none;
}

div#menu ul li:hover > ul,
div#menu ul li:focus-within > ul,
div#menu ul li ul:hover,
div#menu ul li ul:focus {
    visibility: visible;
    opacity: 1;
    display: block;
    z-index: +1;
}

div#menu ul li ul li {
    clear: both;
    width: 100%;
}