Html 图像不会正确显示在导航栏上

好了，我花了很多时间试图找到一个关于这种导航条（精灵翻转）的教程，我终于找到了一个几乎可以工作的，有人能帮我吗？ 我遇到的问题是，我的按钮的图像根本不会显示在设计视图中，如果我对网站进行直播，它们会显示出来，但它不会显示完整的图像，它只显示文本链接后面的每个按钮的一小部分。先谢谢你。 这是密码

HTML

---

首先，为什么不这样做：

<ul class="navbar">
   <li><a href="#">Some link></li>
</ul>

---

第一个和最后一个按钮与其他按钮的大小不同，主按钮和触点接口为115px x 55px，其余为120px x 55px。然后您可以使用.home{}并将其放置在.navbar li样式之后，它将正确层叠我对编码相当陌生，但我会尝试一下，然后再联系您，感谢您的帮助它已经工作了，但它仍在做与以前相同的事情，因为它只在.html文本后面显示少量图像。您需要在结束标记之前将href文本与ext交换，以便链接工作。您需要添加列表样式：无；为了让列表显示在“arnt”行中，真的吗？懒得写正确的英语？如果你希望别人花时间回答你的问题，那么你为什么不能花时间适当地写作作为对他们的礼貌呢？习惯的力量，不是吗

  .navbar {
    display: inline-block;
    position: absolute;
    height: 55px;
    width: 950px;
}


.home {
    float: left;
    height: 55px;
    width: 115px;
    position: relative;
}
.health {
    float: left;
    height: 55px;
    width: 120px;
    position: relative;
}
.workouts {
    float: left;
    height: 55px;
    width: 120px;
    position: relative;
}
.diet {
    float: left;
    height: 55px;
    width: 120px;
    position: relative;
}
.lifestyle {
    float: left;
    height: 55px;
    width: 120px;
    position: relative;
}
.news {
    float: left;
    height: 55px;
    width: 120px;
    position: relative;
}
.forum {
    float: left;
    height: 55px;
    width: 120px;
    position: relative;
}
.contact {
    float: left;
    height: 55px;
    width: 115px;
    position: relative;
}
.home a:link {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
.health a:link {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -115px 0px;
}
.workouts a:link {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -235px 0px;
}
.diet a:link {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -355px 0px;
}
.lifestyle a:link {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -475px 0px;
}
.news a:link {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -595px 0px;
}
.forum a:link {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: 715px 0px;
}
.contact a:link {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: 830px 0px;
}
.home a:hover {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: 0px -55px;
}
.health a:hover {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -115px -55px;
}
.workouts a:hover {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -235px -55px;
}
.diet a:hover {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -355px -55px;
}
.lifestyle a:hover {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -475px -55px;
}
.news a:hover {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -595px -55px;
}
.forum a:hover {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -715px -55px;
}
.contact a:hover {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -830px -55px;
}
.home a:active {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: 0px -110px;
}
.health a:active {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -115px -110px;
}
.workouts a:active {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -235px -110px;
}
.diet a:active {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -355px -110px;
}
.lifestyle a:active {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -475px -110px;
}
.news a:active {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -595px -110px;
}
.forum a:active {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -715px -110px;
}
.contact a:active {
    background-image: url(img/NavbarSprite.png);
    background-repeat: no-repeat;
    background-position: -830px -110px;
}

<ul class="navbar">
   <li><a href="#">Some link></li>
</ul>

.navbar li
{
  float: left;
  height: 55px;
  width: 115px;
  position: relative;
} 
.navbar li a
{
  background-image:"someimage.png";
}