带有背景位置放置难题的高级 css 精灵菜单

Question

目前正在尝试使用背景定位在 150wx300h div 内创建垂直 css-sprite 菜单。

{http://removed/test1/images}

为了更好地理解这里的 450x100 垂直 css-sprite 菜单示例。 {http://removed/test1/index}

我目前遇到的主要问题是在 div 中放置一个 750x100 的垂直图像。刷新后 sidemen.png 消失，但是通过将鼠标悬停在它上面，您可以看到那里的显示块（链接）。 {http://removedtest2/index}

由于 css 菜单以 50 个高度像素的块显示，因此菜单应该很适合..300px/6 = 50px..还试图弄清楚如何删除 150wx300h div 内 #menu2(css ul) 上方的空间，但我怀疑这是罪魁祸首，因为我尝试将 rightMENU 高度增加到 900px。

如果有任何帮助的话..css 水平菜单教程变得垂直了.. http://www.shopdev.co.uk/blog/animated-menus-using-jquery/

#rightMENU{width:150px;height:300px;margin-left:700px;position:absolute;}  

ul#menu2 {

width:100%;
height:50px;

list-style:none;


}

ul#menu2 li {
float:right;
list-style-type: none;


}
ul#menu2 li a {
background:url(images/sidemen.png) no-repeat scroll top left;
display:block;
height:50px;
position:relative;

}
 ul#menu2 li a.zombiemod {
width:150px;
}
ul#menu2 li a.deathmatch {
width:150px;
background-position:-150px 0px;
}

ul#menu2 li a.deathrun {
width:150px;
background-position:-300px 0px;
}
ul#menu2 li a.s1 {
width:150px;
background-position:-450px 0px;
}
ul#menu2 li a.s2 {
width:150px;
background-position:-600px 0px;
}
ul#menu2 li a.s3 {
width:150px;
background-position:-750px 0px;
}



ul#menu2 li a span {
background:url(images/sidemen.png) no-repeat scroll bottom left;
display:block;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;


}

ul#menu2 li a.zombiemod span {
background-position:0px -50px;
}
ul#menu2 li a.deathmatch span {
background-position:-150px -50px;
}

ul#menu2 li a.deathrun span {
background-position:-300px -50px;
}

ul#menu2 li a.s1 span {
background-position:-450px -50px;
}

ul#menu2 li a.s2 span {
background-position:-600px -50px;
}

ul#menu2 li a.s3 span {
background-position:-750px -50px;
}



HTML

 <div id="rightMENU">
                 <ul id="menu2">
<li><a href="#" class="zombiemod"><span></span></a></li>
<li><a href="#" class="deathmatch"><span></span></a></li>
<li><a href="#" class="deathrun"><span></span></a></li>
    <li><a href="#" class="s1"><span></span></a></li>
    <li><a href="#" class="s2"><span></span></a></li>
<li><a href="#" class="s3"><span></span></a></li>
 </ul>


</div>

Answer 1

这是你的文件名。

只需删除sidemen .png 中.png 之前的空格，它应该可以正常工作。