目前正在尝试使用背景定位在 150wx300h 的 div 中创建一个垂直的 css-sprite 菜单。
{http://removed/test1/images}
为了更好地理解此处的 450x100 垂直 css-sprite 菜单示例。 {http://removed/test1/index}
我目前遇到的主要问题是在 div 中定位 750x100 的垂直图像。刷新 sidemen.png 后消失,但是将鼠标悬停在它上面你可以看到那里的显示 block (链接)。 {http://removedtest2/index}
由于 css 菜单以 50 个高度像素的 block 显示,菜单应该紧贴..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>
最佳答案
这是你的文件名。
只需删除 sidemen .png
中 .png
之前的空格,它应该可以正常工作。
关于jquery - 带有背景位置放置难题的高级 css sprite 菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13853480/