Bootstrap Navbar - Menu Items border issue

Question

I am working on Bootstrap and I got requirement like below image...

Online Demo

Requirement

I am able to get everything, except border height. Border height should not be coming from Top and end at Bottom. But the tricky part is, Total height should be clickable... :(

What I am getting

HTML

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>
  </div>
</nav>

CSS

.navbar-default{background:#005986;}
.navbar{border:0;border-radius:0;}
ul.nav{border-right:1px solid #84B6D0;}
ul.nav li a{border-left:1px solid #84B6D0;color:#fff; }
.navbar-default .navbar-nav>li>a,.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover{color:#fff;}
.navbar-default .navbar-nav>li>a:hover{background:#022E44;}

Answer 1

You can use psuedo-element after and before to achieve this

.navbar-default {
  background: #005986;
}
.navbar {
  border: 0;
  border-radius: 0;
}
ul.nav {
  list-style: none;
  border-right: 1px solid #84B6D0;
}
ul.nav li {
  padding: 20px 0;
  display: inline-block;
}
ul.nav li a {
  padding: 20px 10px;
  color: #fff;
  position: relative;
}
ul.nav li a:after {
  position: absolute;
  content: "";
  width: 2px;
  height: 60%;
  right: 0;
  background: #fff;
  top: 50%;
  transform: translate(0, -50%);
}
ul.nav li:first-child a:before {
  position: absolute;
  content: "";
  width: 2px;
  height: 60%;
  left: 0;
  background: #fff;
  top: 50%;
  transform: translate(0, -50%);
}
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
  color: #fff;
}
.navbar-default .navbar-nav>li>a:hover {
  background: #022E44;
}

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li><a href="#">Link 1</a>
      </li>
      <li><a href="#">Link 2</a>
      </li>
      <li><a href="#">Link 3</a>
      </li>
      <li><a href="#">Link 4</a>
      </li>
    </ul>
  </div>
</nav>

Answer 2

.navbar-default {
    background: #005986;
}

.navbar {
    border: 0;
    border-radius: 0;
}

ul.nav li:last-child a {
    border-right: 1px solid #84B6D0;
    color: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
}

ul.nav li a {
    border-left: 1px solid #84B6D0;
    color: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
}

.navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:focus,
    .navbar-default .navbar-nav>li>a:hover {
    color: #fff;
}

.navbar-default .navbar-nav>li>a:hover {
    background: #022E44;
}