html {
  margin: 0;
  color: #f7f7dc;
  font: 1rem/1.6rem "Titillium Web", sans-serif;
  background: #000 url(http://www.moonwards.com/img/tycho-mod.png) no-repeat fixed right 250px;
  padding: 0;
  background-size: 1600px; }

/* This is where the good part starts, what's above is just to give a certain look */

/* The first part creates the dark grey bar the menu goes inside */
nav {
  width: 100%; /*it's as wide as the screen, but height is set later*/
  position: fixed; /*so it doesn't move*/
  top: 0;
  left: 0;
  z-index: 20; /*so it sits on top of other content*/
  background-color: #111; }

nav > ul /* this only affects the ul in the menu bar - the child of nav */{
  list-style-type: none; /* no dots beside list items */
  width: 100%; /* wide as its parent, nav */
  height: 1.8rem; /* this sets the height of the menu bar */
  margin: 0; /* margins - use them only when you have to */
  margin-bottom: 0.2rem; /* and here you have to so the words have a bit of space underneath*/
  padding: 0; /* same as margins - only when necessary, and set to 0 otherwise, or browsers shift things around */}

nav a {
  text-decoration: none; /* no underline on links */
  font-weight: 300;
  padding: 0.5rem; /* puts a little space around each link */
  color: #fac819; }
  nav a:visited {
    color: #fac819; }
  nav a:hover {
    color: yellow; 
    background-color: #3c3c0a; }
  nav a:active {
    color: yellow; 
    background-color: #3c3c0a; } 

nav li ul /* this covers all ul which are descendents of li which are descendents of nav. So, any ul in nav that is part of a li. That is all of them in the nav, except the ul that wraps them all, which is covered by nav > ul.*/{
  background-color: rgb(47, 52, 0);
  list-style-type: none; }

nav li ul a /* Similarly, this covers all the links except the links in the ul that wraps everything, in the menu bar*/{
  padding: 0.1rem 0.3rem 0.3rem 0.3rem; }

nav li ul a:hover /* This overrides the green background color on links created in the nav a rules, because otherwise words obcure other words when hovered */{
  background-color: transparent; }

nav > ul > li /* this says the li children of ul child of nav - it only covers the lis directly inside the ul that is the first one inside the nav tags, not the nested ones */{
  display: inline; /* this makes them go in a line horizontally, not vertically */
  font-size: 1.1rem;
  font-weight: 300;
  position: absolute;/* change position calculated from the edges of the parent element */
  top: 0.3rem; } /* put this space between the top edge of the parent element and the top of the lis */

/*The following rules using nth-child space the words in the menu bar along the width of the screen. Because position:absolute is in the previous set of rules, it  applies to everything to do with these lis. So, left measures from the left edge of ul, whichg= has width: 100%, and so does nav, so, from the left edge of the browser window. So divide 100 by the number of li in that ul, and that is the amount to add to each li after the first as a percent. And give the first one a little space on its left side.
After that, you have to undo that spacing on the ul inside each li so they stay inside the window and not too close to the edges. */

nav > ul > li:nth-child(1) {
  left: 1rem; }
  nav > ul > li:nth-child(1) > ul {
    position: relative;
    top: 0; }

nav > ul > li:nth-child(2) {
  left: 25%; }
  nav > ul > li:nth-child(2) > ul {
    position: relative;
    left: -25%; }

nav > ul > li:nth-child(3) {
  left: 50%; }
  nav > ul > li:nth-child(3) > ul {
    position: relative;
    left: -50%; }

nav > ul > li:nth-child(4) {
  left: 75%; }
  nav > ul > li:nth-child(4) > ul {
    position: relative;
    left: -75%; }

/* This targets the uls nested inside the first ul's li, hiding all nested content. The use of > allows the target to be specific. */
nav > ul > li > ul {
  display: none; /* hides the nested li, but not from devices to assist the visually impaired */
  width: 60vw; /* though they aren't shown, their properties can be defined. Here says they are 60 viewport units wide, meaning, 60/100 of the width of the browser window - not of the parent element. */ 
  height: auto; /*This property is what makes the height of the nested ul adjust to the tallest set of elements stacked inside it */
  padding: 0.2rem 1rem 1rem 1rem;
  border-radius: 15px;
  margin: 0; 
  border: 1px solid #50500f;
}

/* Then when those li are hovered over,  */
nav > ul > li:hover > ul {
  display: flex; /*now the child uls display - and in flexbox format, which is how they are made responsive with the remaining markup*/
  align-items: flex-start; /*pushes uls all to the top left*/
  flex-flow: row wrap; } /*gets uls to align in rows and wrap when they run out of space */

/*This section styles the li in the first-level of the menus that appear on hover*/
nav > ul > li > ul > li {
  flex: 1 1 9rem; /*start from a provisional width of 9rem, then shrink or grow as space allows*/
  font-size: 1.2rem;
  font-weight: 300;
  padding: 0;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  justify-content: flex-start; }

/*This section targets all ul that are descendents of li in the menus that display on hover - so, all the nested uls.*/
nav > ul > li > ul > li ul {
  padding: 0 0.6rem 0.8rem 0.5rem; /*This nests each level in a way that distinguishes it from the parent by the space around it */
  margin: 0;
  margin-bottom: 0.8rem;
  font-size: 0.9em; /* rem units have been used in general, so they are consistent across devices, but here em is used, so that each time something is nested within another ul, the text is 90% the size of the parent ul. This will work with any number of nested levels, until the text is too small to read. */
  letter-spacing: 0.1rem;
  border-left: 2px solid #565610; /*The border on the left side of each ul is the final touch that helps keep the structure clear.*/
}

/*In order for this to work across all modern browsers and IE11, you will need the version with prefixes. I used Bourbon (www.bourbon.io) to insert those prefixes on the SASS version (sass-lang.com). I have another version here on CodePen, that has the prefixes, and doesn't have these comments. It is at https://codepen.io/kimholder/pen/jBBNOe*/