html - 錠剤が終わるまで最後のブロックを作ります

Question

だから私はこのようなデザインを持っています:

そして私のhtml：

<div id="tabs-profile">
        <ul class="nav nav-pills uppercase bold">
          <li class="active"><a data-toggle="pill" href="#portfolio">portfolio</a></li>
          <li><a data-toggle="pill" href="#info">info</a></li>
          <li><a data-toggle="pill" href="#recommendation">recommendation</a></li>
        </ul>
      </div><!-- tabs-profile -->

そして私のCSS：

.nav-pills>li>a{
padding: 10px 35px;
border-radius: 0;
color: #fff;}

.nav-pills{
padding: 5px 0 0;
background-color: #f8e713;}

質問：

アクティブなときliに最後まで背景色を持つラストを作成する方法は?navpills