html - CSS Navigation Sprite 悬停不起作用

Question

我在尝试为我的 sprite 导航实现 CSS 部分以在我的 sprite 悬停时带来“悬停”效果时遇到问题。如果我显示代码，更容易解释。

CSS:

#nav {

    width:837px;
    float:left;
    margin:0px 0px 0px 30px;
    background:url(../images/withtext.gif) repeat-x;
    height:79px;
    position: relative;
    top: -45px;
}   


#nav li {
 margin:0;
 padding:0;
 list-style-type:none;
 display:inline; 
 height:79px;
 text-align:center; 
 float:left; 
 line-height:79px; 
 font-family:Georgia, "Times New Roman", Times, serif;
 }



#nav a {
 display:block;
 height:79px; 
 color:#311f11;
 text-decoration:none;
 font-size:13px;
 }

#nav a:hover {
 background-image:url(withtext.gif); 
 color:#fff;
 }



#nav .snowboard { width:240px; }
#nav .snowboard a:hover { background-position: 0px bottom; }

HTML:

<ul id="nav">
   <li class="snowboard"><a href="#">Snowboard</a></li>
   <li class="briller"><a href="#">Briller</a></li>
   <li class="ski"><a href="#">Ski</a></li>
   <li class="stovler"><a href="#">Stovler</a></li>
   <li class="handlevogn"><a href="#">Handlevogn</a></li>

</ul>

导航图片:

[1] http://i.imgur.com/zkVmoEN.gif "具有被动和悬停状态的导航栏"

当前导航状态:

[2] http://i.imgur.com/oZPK8kd.jpg “在浏览器中导航”

那么如何让它在悬停时向下移动图像一个完整的缺口？

在此先感谢您的帮助!

Answer 1

你的工作开始了 solution

#nav ul, #nav li{
  margin: 0;
  padding: 0;
}
#nav {

    width:837px;
    float:left;
    margin:0px 0px 0px 30px;
    background:url(http://i.imgur.com/zkVmoEN.gif) repeat-x;
    height:79px;
    position: relative;
}   

#nav li {
 margin:0;
 padding:0;
 list-style-type:none;
 display:inline; 
 height:79px;
 text-align:center; 
 float:left; 
 line-height:79px; 
 font-family:Georgia, "Times New Roman", Times, serif;
 }

#nav a {
 display:block;
 height:79px; 
 color:#311f11;
 text-decoration:none;
 font-size:13px;
  width:150px;
  text-indent:-9999px;
 }
.snowboard a:hover {
  background-image: url(http://i.imgur.com/zkVmoEN.gif);
  background-position: -40px 80px;
}
.briller a:hover {
  background-image: url(http://i.imgur.com/zkVmoEN.gif);
  background-position: -190px 80px;
}
.ski a:hover {
  background-image: url(http://i.imgur.com/zkVmoEN.gif);
  background-position: -340px 80px;
}
.stovler a:hover {
  background-image: url(http://i.imgur.com/zkVmoEN.gif);
  background-position: -490px 80px;
}
.handlevogn a:hover {
  background-image: url(http://i.imgur.com/zkVmoEN.gif);
  background-position: -640px 80px;
}