Linh’s Navigation Markup and CSS, shown as gist to compare changes

markup.html

<!-- Only showing the markup for the navigation elements themselves -->
<ul class="site-nav">
    <li class="site-nav-item -work"><a href="../Portfolio/work.html" class="site-nav-link">Work</a></li>
    <li class="site-nav-item -resume"><a href="../Portfolio/resume.html" class="site-nav-link">Resume</a></li>
    <li class="site-nav-item -contact"><a href="../Portfolio/contact.html" class="site-nav-link">Contact</a></li>
</ul>

styles.css

/*
 * Site Nav CSS
 * Styles specific for the styling of the homepage navigation,
 * which has offset borders 
 *
*/

/*
 * Site Nav
 * added `position: relative;` to contain positioned items.
*/
.site-nav {
  position: relative;
  list-style: none;
  font-family: 'calibri', helvetica, arial, sans-serif;
  font-weight: normal;
  font-size: 22px;
  padding-left: 0;
  margin: 0;
}

/*
 * Site Nav Item
 * Each list item in .site-nav shares this class
 * 
*/
.site-nav-item {
  position: relative;
}

.site-nav-item + .site-nav-item {
  margin-top: 40px;
}

.site-nav-item:hover {
  z-index: 10;
}

/*
 * Site Nav Link 
 * Each <a> tag has this class. This way, you can set a bunch of 
 * styles shared for the links, then customize it for a specific 
 * link.
 * 
 * Set margin to give space "inside" of each list item, which gives
 * us room for moving the borders around.
 *
*/
.site-nav-link {
  position: relative;
  display: block;
  padding: 20px;
  margin: 20px;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav-link:link,
.site-nav-link:visited,
.site-nav-link:active{
  color: #fff
}

.site-nav-link:hover,
.site-nav-link:focus {
  color: #000;
  background-color: #fff;
}

.site-nav-link:before,
.site-nav-link:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.site-nav-link,
.site-nav-link:before,
.site-nav-link:after {
  border: 2px solid #663399;
}


/* Use z-index to control which border overlaps the other */
.site-nav-link {
  z-index: 1;
}

.site-nav-link:before {
  top: -10px;
  left: -10px;
  border-color: #9999cc;
  z-index: 1;
}

.site-nav-link:after {
  top: 10px;
  left: 10px;
  border-color: #cc0099;
  z-index: 1;
}

.site-nav-link:hover:after,
.site-nav-link:focus:after {
border-color: transparent;
}

/* Desktop Styles */

@media (min-width: 48em) {
  .site-nav-item {
    position: absolute;
    width: 33%;
    height: 300px;
  }

  
  .site-nav-item.-work {
    top: 0;
    left: 18%;
  }
  
  .site-nav-item.-resume {
    top: 60px;
    left: 0;
  }
  
  .site-nav-item.-contact {
    top: 180px;
    left: 12%
  }
  
  .site-nav-link {
    height: 100%;
  }
}

body {
  background: #000;
}