Bootstrap Navbar - Menu questione Articoli confine

Question

sto lavorando su Bootstrap e ho avuto requisito come qui di seguito un'immagine ...

Online Demo

Requisito

Sono in grado di ge tutto, eccetto l'altezza del confine. L'altezza del bordo non deve provenire dall'alto e terminare in basso. Ma la parte difficile è, Altezza totale dovrebbe essere cliccabile ... :(

Quello che sto ottenendo

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

È possibile utilizzare psuedo-elementafter e before per raggiungere questo

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

è possibile controllare al violino: 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; 
}