nav {
  background: #1888c7;
  padding: 5px;
  margin-bottom: 20px;
}

nav ul {
  padding: 0;
}

nav ul ul {
  display: none;
  position: absolute;
  /* awesome trick for dropdown to be in front of content. Giving me ideas for toggling the dropdown using jQuery as well.*/
  background: #1888c7;
  padding-top: 10px;
  /* Padding makes sure that the dropdown doesn't disappear because still inside the element, but if I use margin, then it disappears. */
}

/* Style Menu on Hover */
li:hover ul {
  display: block;
}

li a:hover {
  display: block;
}

/* Style Menu Li */
nav > ul > li {
  display: inline-block;
  margin: 0 10px;
  vertical-align: top;
  width: 100px;
}

li {
  list-style: none;
}