Reasonable Navbar in Bootstrap 3.2 with list items that fill 100% of the height?

I've created a Reasonable Navbar in Bootstrap 3.2, but I can't get the links in the list items to display 100% height. See my JSFiddle here: http://jsfiddle.net/fncage1n/2/

HTML:

<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav nav-justified">
        <li><a href="#">Find your Home</a></li>
        <li class="dropdown" data-toggle="dropdown"><a href="#">New Developments <span class="caret visible-xs"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Poole Road, Sunderland</a></li>
          </ul>
        </li>
        <li class="dropdown" data-toggle="dropdown"><a href="#">Buying from Inspired <span class="caret visible-xs"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Overview</a></li>
            <li><a href="#">Why choose Inspired?</a></li>
            <li><a href="#">Buying Guide</a></li>
            <li><a href="#">Incentives</a></li>
            <li><a href="#">Customer Care</a></li>
          </ul>
        </li>
        <li class="dropdown" data-toggle="dropdown"><a href="#">Help to Buy <span class="caret visible-xs"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Overview</a></li>
            <li><a href="#">Find out if you qualify</a></li>
            <li><a href="#">Other schemes</a></li>
          </ul>
        </li>
        <li><a href="#">Contact us</a></li>
      </ul>
    </div>
  </div>
</nav>

      

        
        
        
      

    

CSS

.navbar {
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
    border: none; }

@media (max-width: 768px) {
.navbar-toggle {
    margin: 10px 20px; } 
}

@media (min-width: 768px) {
.nav-justified > li, .nav-tabs.nav-justified > li {
    display: table-cell;
    vertical-align: middle;
    border-left: 1px solid #598d8d;
    float: none; }

.nav-justified > li:last-child {
    border-right: 1px solid #598d8d; }

/* FOR HIGHLIGHTING PROBLEM ONLY */
.navbar-nav.nav-justified > li a {
    background: #660066; }

.navbar-collapse {
    padding-left: 0;
    padding-right: 0; }

.dropdown:hover .dropdown-menu {
    display: block;
    min-width: 100%; }

.dropdown-menu > li > a {
    font-size: 14px;
    padding: 5px 20px;
    transition: 0; }

.dropdown-menu > li > a:hover {
    color: #fff; }

.dropdown-menu, .follow-us .dropdown-menu {
    padding-top: 10px;
    padding-bottom: 10px; } 
}

      

        
        
        
      

    

The problem only occurs when viewing the tablet size, as text in some menu items extends over more than one line. Menu items that fit 1 line then do not fill 100% of the Navbar height - I have highlighted the links background in purple so you can see it better without hovering.

Can anyone see where I am going wrong? Any feedback will be highly appreciated!