Untitled

CSS: background-position not working
<div id="topnav">
  <ul>
    <li id="nav-home"><a href="index.html">Feature Product<span></span></a></li>
    <li id="nav-all"><a href="shop_owners.html">All Products<span></span></a></li>
    <li id="nav-how"><a href="all_products.html">How It Works<span></span></a></li>
  </ul>
</div>

#topnav {
  position: relative;
  left: 150px;
  top: 100px;
  margin: 0;
  padding: 0;
  height: 50px;
}

#topnav ul {
  list-style-type: none;
  text-align: center;
  line-height: 50px;
}

#topnav ul li {
  float: left;
}

#topnav ul li a {
  background: url(../nav-bar-2.png);
  background-repeat: no-repeat;
  display: block;
  height: 50px;
  position: relative;
}

#nav-home {
  width: 200px;
}

#nav-all {
  width: 200px;
  background-position: -200 0px
}

#nav-how {
  width: 200px;
  background-position: -400px 0px
}

#topnav ul li a span {
  background: url(../nav-bar-2.png) no-repeat scroll bottom left;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  z-index: 100;
}

#topnav li a span:hover {
  cursor: pointer;
}

#nav-home span {
  background-position: 0px -50px
}

#nav-all span {
  background-position: -200 -50px;
}

#nav-how span {
  background-position: -400 -50px;
}

#nav-home{width:200px;}
#nav-all{width:200px; background-position:-200 0px}
#nav-how{width:200px; background-position:-400px 0px}

#topnav ul li {background:url(../nav-bar-2.png); // a was removed from end of list