body {
  background: url("../img/bg.jpg");
}
ul {
  font: .95em/1.4em Helvetica, Arial, sans-serif;
  background-color:       rgb(255, 253, 253);
}
li {
  position: relative;
  display: inline-block;
  list-style: none;
}
li a {
  display: block;
  padding: .7em 1.5em;
  color: rgb(0, 0, 0);
  text-decoration: none;
  border-radius: 3px;
  transition: background .2s;
}
li a:not(:only-child):after {
  content: '\21b4';
  display: inline-block;
  padding-left: .5em;
  color: black;
}
li a:hover {
  color: white;
  background: #00BFFF;
}
.top-level {
  border-bottom: 0px solid #00BFFF;
}
.second-level,
.third-level {
  min-width: 19em;
  border: 1px solid rgb(0, 204, 255);
  border-radius: 0px;
}


/*dropdown menu styles*/
/*first level*/
.top-level li:hover .second-level {
  left: 0;
}
.second-level:before {
  content: '';
  position: absolute;
  top: -8px;
  left: 2em;
  border-bottom: 8px solid #00BFFF;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}
.second-level {
  position: absolute;
  top: 100%;
  left: -9999em;
}
.second-level li {
  position: relative;
  display: block;
}
.second-level li a {
  margin: 0;
}

/*second level*/
.second-level li:hover .third-level {
  left: 100%;
}
.third-level:before {
  content: '';
  position: absolute;
  top: 10px;
  left: -8px;
  border-bottom: 8px solid transparent;
  border-top: 8px solid transparent;
  border-right: 8px solid #00BFFF;
}
.third-level {
  position: absolute;
  left: -9999em;
  top: 0;
}