html - Bootstrap3 レスポンシブ スプライト ナビゲーション

Question

スライスしてブートストラップに入れるためのpsdをくれたクライアントがいます。pds には、ナビゲーション バーの画像があり、奇妙な形をしていたので、スプライト ナビゲーション バーを作成しました。これをcssで再現するのは不可能です。

私の問題は、少なくとも彼らが反応しないということです。メディアクエリを使用して数ピクセルごとにサイズを変更することなく、それらを作成する方法はありますか?

私のhtml

  <div class="col-md-8">
    <nav>
      <ul>
        <li><a class="about" href="#">About</a></li>
        <li><a class="products" href="#">Products</a></li>
        <li><a class="technology" href="#">Technology</a></li>
      </ul>
    </nav>
  </div><!--.col-md-8-->

そして私のCSS

nav ul li{
  float: left;
  list-style-type:none ;
  text-indent:-9999em;
}

nav ul li a{
    background:url(../img/nav.png) no-repeat;
  display: block;
}

.about{
  background-position:0px 0px;  
  width:25em;  
  height:5em;  
}

.products{
  background-position:-25em 0;  
  width:9em;  
  height:5em;  
}

.technology{
  background-position:-34em 0;  
  width:13em;  
  height:5em;  
}

と を追加しようmin-heightとmin-widthしましたが、効果がないようです。