.menu {
  font-family: Inconsolata, monospace;
  letter-spacing: 0.062em;
  margin-top: 0.7em; /*visually matches BODY margin-top*/
}
.menu ul {
  list-style: none;
  position: relative; /*submenus*/
  z-index: 2; /*above "Download Issue"*/
}
.menu ul li { /*top-level list items*/
  display: inline;
  float: left;
  position: relative; /*submenus*/
}
.menu ul li a { /*top-level menu items link style*/
  border-left: 1px solid silver; /*separator*/
  display: block;
  padding: 0.25em 0.5em; /*looks good with arrow*/
  position: relative; /*submenus*/
  text-decoration: none;
}
.menu ul li .silver { border-right: 1px solid silver } /*SLED*/
.menu ul li > a[href="#"]:hover { cursor: default }
.menu ul li > a[href="#"]:focus { background: #F2E5F2 }
.menu ul li a:link,
.menu ul li a:visited { color: black }
.menu ul li a,
.menu ul li:hover > a { border-bottom: 1px solid transparent } /*undo standard links*/
.menu ul li:hover > a { background: #F2E5F2 }
.menu ul li .right { right: 0 } /*for long top-level menu items*/
.menu ul li ul { /*sub-ULs style*/
  opacity: 0.0;
  position: absolute;
  top: auto;
  transition: opacity 0.3s, visibility 0s 0.3s, left 0s 0.3s;
  visibility: hidden;
  width: fit-content;
  width: -moz-max-content;
  width: -webkit-max-content;
}
.menu ul li:hover > ul { /*first sub-levels UL style on hover*/
  opacity: 1.0;
  transition: opacity 0.5s;
  visibility: visible;
}
.menu ul li ul li { /*sub-level menu list items*/
  display: list-item;
  float: none;
}
.menu ul li ul li ul { /*2nd and beyond sub-levels vertical offset after 1st level submenu*/
  left: 100%;
  top: 0;
}
.menu ul ul li:hover > a { background: #E5CCE5 } /*sub-levels link style on hover and when active*/
.menu ul ul li:hover > ul { left: 100% } /*sub-levels UL style on hover*/
.menu ul li ul li a { /*sub-level menu links style*/
  background: #F2E5F2;
  border-right: none;
  border-top-width: 0;
  font-size: 0.9em; /*smaller*/
  padding: 0.25em 0.5em; /*looks good with arrow*/
}
.menu ul li ul li:last-of-type a { border-bottom: none }
.menu ul li > a { padding-right: 1.5em } /*add padding to accommodate arrow inside LIs*/
.menu ul li > a:only-child { padding-right: 0.5em } /*undo padding for non-submenu LIs*/
.menu ul li > a:after { /*add arrow inside LIs*/
  border: 5px solid transparent;
  border-top-color: black;
  content: '';
  height: 0;
  position: absolute;
  right: 8px;
  top: 10px;
  width: 0;
}
.menu ul li > a:only-child:after { display: none } /*undo arrow for non-submenu LIs*/
.menu ul li ul li > a { padding-right: 1.5em } /*same as the main arrow*/
.menu ul li ul li > a:after { /*change arrow to right arrow inside sub-UL LIs*/
  border-left-color: black;
  border-top-color: transparent;
  right: 4px;
  top: 6px;
}

@media only screen and (max-width: 600px) { /*ruler breakpoint*/
  .menu { display: none }
}