#nav {
  list-style-type:none; /* A <ul> property; removes the bullets from <li> elements. */
  background:Green; /* To show through for a border to each item */
  font-weight:bold;
  font-size:115%;
  margin-top:0px;
  margin-bottom:0px;
  float:left; /* Clear floats */

  width:100%;


  /*  Removes browser default padding that moves <ul> and its <li> elements 40px

      to the right. This property apparently affects only the element that has

      the "id" tag, i.e., the topmost <ul> element.

  */

  padding-left:0px;


  text-align:center;
}

#nav li {
  /*  Use float to get block elements to slide next to each other.
      Makes the li items arrange on a horizontal line rather than vertically.
      See http://www.w3schools.com/css/css_navbar.asp
  */

  float:left;

  /* Puts horizontal space between the main menu items; background color shows through */
  margin-right:0.1em;

  /*  Applying position:relative; to the list items allows us to use
      position:absolute; on the nested <ul>s later on. (because it's not static?)
  */
  position:relative;
}

#nav a {
  /*  Displaying the links as block elements makes the whole link area clickable
      (not just the text), and it allows us to specify the width.
  */
  display:block;

  /* Allow longer menu items to cause a wider width */
  width:auto;
  /* Minimum width for uniform width of menu items (necessary?) */
  min-width:9em;

  padding:0.4em;
  color:FloralWhite;
  background:#003300; /* DarkDarkGreen */
  text-decoration:none;
}

#nav a:hover {
  color:FloralWhite;
  background:#003300; /* DarkDarkGreen */
  text-decoration:underline;
}

/* Replicate the <A> properties in a <div> that can be used instead of an anchor
   in the main menu bar.
*/
#nav div.item {
  width:auto;
  min-width:9em;
  padding:0.4em;
  color:FloralWhite;
  background:#003300; /* DarkDarkGreen */
}

/*--- DROPDOWN ---*/

#nav ul {
  /* Removes browser default padding that moves <ul> and its <li> elements 40px

     to the right. This property apparently affects only the elements that are

     children of the uppermost <ul> and <li> elements. I.e., the drop-down

     list items.

  */

  padding-left:0px;



  background:Green; /* To show through for a border to each link */

  /*  But! Let's make the background fully transparent where we can, we don't
      actually want to see it if we can help it...
  */
  /*background:rgba(255,255,255,0);*/

  list-style:none;
  position:absolute; /* Position the dropdown above the list item that holds it. */
  left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}

#nav ul li {
  padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
  float:none;
}

#nav ul a {
  white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}

#nav li:hover ul { /* Display the dropdown on hover */
  left:0px; /* Bring back on-screen when needed */

}

/*  These create persistent hover states, meaning the top-most link stays
    'hovered' even when your cursor has moved down the list.
*/
#nav li:hover a {
  background:#003800;
  text-decoration:none;
}

/*  The persistent hover state does however create a global style for links
    even before they're hovered. Here we undo these effects.
 */
#nav li:hover ul a {
  text-decoration:none;
}

/*  Here we define the most explicit hover states--what happens when you hover
    each individual link.
*/
#nav li:hover ul li a:hover {
  background:Green;
}