:root {
    --nav-bgcolor: rgb(255, 255, 255);
    --nav-color: rgb(50, 50, 50);
    --nav-hover-bgcolor: rgb(125, 125, 125);
    --nav-hover-color: rgb(255, 255, 255);
}

* {
    box-sizing: border-box;
}

/* remove list styles and margins for all ul and li in nav */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: var(--nav-bgcolor);
}

nav a:link,
nav a:visited {
    color: var(--nav-color);
}

nav a:hover,
nav a:active {
    background-color: var(--nav-hover-bgcolor);
    color: var(--nav-hover-color);
}

nav {
    position: absolute;
    right: 1rem;
}

nav>ul {
    display: flex;
    justify-content: flex-end;
}

nav>ul>li {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

nav ul>li>a {
    text-align: left;
    display: block;
    font-weight: normal;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

nav ul li a:hover {
    text-decoration: none;
}

/* styles for dropdown */
nav>ul>li>ul {
    display: none;
}

nav>ul>li:hover>ul {
    display: block;
    /* 
    CSS position: https://developer.mozilla.org/en-US/docs/Web/CSS/position
    position: absolute
    The element is removed from the normal document flow, 
    and no space is created for the element in the page layout. 
    It is positioned relative to its closest positioned ancestor, 
    if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

    If the nested ul doesn't have a "positioned ancestor", 
    the positioning will be relative to the *initial containing block*.
    Since the nav in this design doesn't span the entire page,
    having a positinoed ancestor will be important.  
    Therefore, I've made the "nav" a positioned element (css lines 31, 32)
    so "right" and "left" below are relative to the nav, not the body
    */
    position: absolute;
    right: 0px;
    left: 0px;
    z-index: 9;
    border: thin solid black;
}

nav>ul>li {
    border: thin solid transparent;
}

nav>ul>li:hover {
    border-top-color: black;
    border-left-color: black;
    border-right-color: black;
}