.topLevelMenuItem {
  float: left; /* position the container w.r.t. the main container */
  font-family: Arial;
  letter-spacing: 0px;
}

#lnav {  /* main container for the list elements */
  float: left; /* position the container w.r.t. the main container */
  font-family: Arial;
  font-size: 0.8em;
  font-weight: bold;
  letter-spacing: 0px;
  margin-top: 0.2em; /* vertical alignment of the container */
  width: 13em; /* width of the container */
}

#nav, #nav ul { /* all lists */
  line-height: 2em;
  list-style: none;
  margin: 0;
  padding: 0; /* remove default spacings */
  width: 100%;
}

#nav a { /* top level links */
  background-color: #e7ecfe;
  color: #000000;
  display: block;
  line-height: 3em; /* necessary to be set so it can be referenced for positioning succeeding list elements */
  padding: 0 1em;
  text-decoration: none;
}

#nav li { /* top level no links */
  background-color: #e7ecfe;
  border: solid #ffffff;
  border-width: 0.15em;
  float: left;
  margin-bottom: -1px;
  position: relative;
  width: 13em; /* for rendering correctly in all browsers */
}

#nav li ul { /* second-level lists */
  background-color: #e7ecfe;
  height: auto;
  left: -999em;
  margin-left: 13em;
  margin-top: -2.1em; /* top of the absolutely positioned boxes cannot be specified, they sit below the line of the hovered list item, which is why the top margin of the next level of lists needs to be set here */
  position: absolute;
}

#nav li ul ul { /* third-and-above-level lists */
  background-color: #e7ecfe;
  height: auto;
  left: -999em;
  margin-left: 13em;
  margin-top: -2.1em;
  position: absolute;
}

#nav li li a { /* second level links */
  background-color: #e7ecfe;
  color: #005689;
  display: block;
  font-weight: normal;
  padding: 0 0.5em;
  text-decoration: none;
}

#nav li a:hover { /* top level links hover */
  background-color: #c6d2fd;
  color: #890000;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
  left: -999em; /* instead of display: none we use left: -999em to propel the drop down list out of view */
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
  background: #c6d2fd;
  left: auto; /* and then left: auto (rather than left: 0) to bring it back */
}

#nav li:hover, #nav li.sfhover {
  background: #c6d2fd;
}