/* To implement dropdowns, we have three styling elements: 
*
*    - dropdown: a div that bundles a dropdown header with associated dropdown content
*    - dropHeader: visible upon first rendering. when you click on a drop header, 
*          its related content will open up.
*    - dropContent: initially hidden, but becomes visible when the dropHeader is clicked.
*/

/* The JS code does not reference class dropdown, so you can name this as you wish. but you do need 
 * this class for styling and to bundle the dropHeader to the dropContent */
.dropdown {
    /* Assign "position relative" to the class that bundles dropHeader elements with dropContent elements. 
    You need something that is not static (the default positioning) so that its "position absolute" children 
    will be positioned with reference to their (non-static) parent.  Of the four positions, only relative 
    and static retain their space in the normal flow. The other two (fixed and absolute) are removed from 
    the normal flow and then positioned w.r.t. to the browsers edges (fixed) or w.r.t. the edges of its first 
    non-static parent. */
    position: relative;  

    /* divs are positioned/treated like words or spanned elements instead of like block/paragraph elements */
    display: inline-block;

    /* a little space between drop down group header entries */
    margin-right: 1ex;

    /* Let's users know that something will happen with they click on things in the drop down group */
    cursor: pointer;
}

/* This is the drop down header that is visible on first rendering of the page. This is what 
 * you click to open up the drop contents. 
 * Don't delete this even though there are no style rules - js needs it, references it. */
.dropHeader {

}

/* This is the initially hidden part of the menu that opens up when you click on the drop header */
.dropContent {
    background-color:black;

    right:0px;
    position: absolute;
    font-size: 14px;
    z-index: 3;

    padding: 8px;
    line-height: 1.7em;
    border-radius: 8px;
    letter-spacing: 1px;

    right: -500px;  /* places the element off screen to the right */
    visibility: hidden; /* initially you cannot see the dropContent elements */

    /* animate the change of the right property when clicked (zooms in from right but slowly)*/
    transition: right 0.5s ease 0s;
}