Bootstrap pasek nawigacyjny - Menu Pozycje granica problem

Question

pracuję nad bootstrap i mam wymóg jak poniżej obrazu ...

Online Demo

Wymagania

Jestem w stanie ge t wszystko oprócz wysokości granicy. Wysokość obramowania nie powinna pochodzić od góry i kończyć się na dole. Ale trudne jest to, całkowita wysokość powinna być klikalne ... :(

Co ja dostaję

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

Można użyć psuedo-elementafter i before aby osiągnąć ten

.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

ul.nav { 
     border-right: 1px solid #84B6D0; 
     margin: 9px 0px; 
     } 

można sprawdzić na skrzypcach: http://jsfiddle.net/Khumesh/7t5wxmnj/

Answer 3

.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; 
}