Bootstrap Headers 导航栏高度菜单项

我来找你，因为我在引导程序导航栏的设计问题上把我的头发拉出脑袋 .

我做了一个带有不同菜单的固定顶部导航栏，一个在右边，一个在左边 . 当用户将鼠标悬停时，我的CSS代码会将链接的背景变为灰色 . 但我注意到我的菜单项高度不同，所以当我的指针悬停在较小的项目上时，新颜色不会填满 Headers 栏的整个高度 . 这是一些帮助您的截图：

还有我的 Headers 栏的代码：

<div class="container-fluid header-bar">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="index.html">Admin Page</a>
  </div>
  <!-- /.navbar-header -->
  <ul class="nav navbar-nav navbar-left">
    <li>
      <a href class=" profile_image" >
        <img src="../../../images/user.png" class="img-circle" alt="profile-pic"> {{vm.account.name}}
      </a>
    </li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li class="dropdown" uib-dropdown="">
      <a href class="dropdown-toggle lang_selector" uib-dropdown-toggle="">
        <span class="flag-sm flag-sm-{{vm.defaultLang.flag}}"></span><span class="lang_desc">{{vm.defaultLang.text}}</span> <span class="caret"></span>
      </a>
      <ul class="dropdown-menu" role="menu" uib-dropdown-menu="">
        <li ng-repeat="lang in vm.langs"><a href class="lang_selector" ng-click="vm.defaultLang = lang"><span class="flag-sm flag-sm-{{lang.flag}}"></span><span class="lang_desc">{{lang.text}}</span></a></li>
      </ul>
    </li>
    <li>
      <a href="" ng-click="vm.logout()">
        <md-icon class="li-icon-black material-icons" aria-label="logout">exit_to_app</md-icon>
      </a>
    </li>
  </ul>
</div>

还有CSS代码：

.smsmode-nav .navbar-header {
     width: 250px;
 }
 .lang_selector > span {
     vertical-align: middle;
  }
  .lang_desc {
    margin-left: 8px
  }
  .navbar-nav > li > a.profile_image {
      padding-top: 10px;
      padding-bottom: 10px;
  }
 .profile_image > img {
    width: 30px;
 }

我知道有一个填充的故事，但我尝试了一切，我无法解决它 . 我绝望了！所以我需要你的帮助！