I cannot make a component highlighted on mouse hover in CSS

I want to make an highlight on mouse hover onto my div. But when I place it in span and try to highlight the spans, it cripple my layout.

I want to make a side menu that will bring a panel with link choices. I can make the Javascript no problem, but the CSS is a big problem.

Here is a JsFiddle with my code in it.

HTML

<div id="main-nav">
  <div class="nav link" value="clientLink">CLIENT</div>
  <div class="nav divider"></div>
  <div class="nav link" value="jobLink">JOB</div>
  <div class="nav divider"></div>
  <div class="nav link" value="employeeLink">MY SPACE</div>
  <span class="stretcher"></span>
</div>

CSS

body {
  background-color: lightgray;
}

#main-nav {
  margin-top: 0px;
  width: 100vh;
  position: fixed;
  height: 10%;
  -webkit-transform-origin: left top;
  -webkit-transform: rotate(-90deg) translateX(-100%);
  top: 0%;
  left: 0px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  border: 1px solid black;
  padding: 0px;
  background-color: cornflowerblue;
  background: rgb(0, 98, 184);
  background: -webkit-linear-gradient(top, rgb(0, 98, 184), lightgray);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(top, rgb(0, 98, 184), lightgray);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(top, rgb(0, 98, 184), lightgray);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(top, rgb(0, 98, 184), lightgray);
  /* Standard syntax */
  z-index: 100;
}

.nav {
  display: inline-block;
  margin: 0px auto;
  height: 100%;
  float: right;
  margin-right: 10%;
  height: 100%;
  line-height: 45px;
  color: white;
  font-size: 100%;
  font-weight: 900;
}

.stretcher {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0;
}

.divider {
  background-color: white;
  width: 1px;
  height: 100%;
  box-shadow: 1px 1px 50px white;
}

.menuContent {
  position: absolute;
  margin-left: -100%;
  height: 100%;
  top: 0%;
  bottom: 0%;
  background: black;
  z-index: 99;
}

.nav:hover {
  background-color: blue;
  background: rgb(0, 98, 210);
  background: -webkit-linear-gradient(top, royalblue, lightgray);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(top, royalblue, lightgray);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(top, royalblue, lightgray);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(top, royalblue, lightgray);
  /* Standard syntax */
}