Css 引导导航栏-菜单项边框问题

我在引导工作，我得到了如下图片要求

要求

我能得到一切，除了边界高度。 边框高度不应从顶部开始，并在底部结束。但棘手的是，总高度应该是可点击的…：(

我得到的

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>

---

您可以使用

psuedo元素

在

之后和

在

之前来实现这一点

.navbar默认值{
背景#005986；
}
navbar先生{
边界：0；
边界半径：0；
}
ul导航{
列表样式：无；
右边框：1px实心#84B6D0；
}
李国宝{
填充：20px0；
显示：内联块；
}
ul.nav李安{
填充：20px 10px；
颜色：#fff；
位置：相对位置；
}
ul.nav李娜：之后{
位置：绝对位置；
内容：“；
宽度：2倍；
身高：60%；
右：0；
背景：#fff；
最高：50%；
转换：翻译（0，-50%）；
}
李：第一个孩子a：以前{
位置：绝对位置；
内容：“；
宽度：2倍；
身高：60%；
左：0；
背景：#fff；
最高：50%；
转换：翻译（0，-50%）；
}
.navbar默认值.navbar nav>li>a，
.navbar默认值.navbar导航>li>a:焦点，
.navbar默认值.navbar导航>li>a:悬停{
颜色：#fff；
}
.navbar默认值.navbar导航>li>a:悬停{
背景#022E44；
}

---

您可以查看小提琴：

@Akshay…非常好..这正是我想要的…谢谢您保存我的日期NP@Reddy很高兴我能帮忙抱歉@Khumesh，缺少可点击区域

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

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

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