Question

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

{http://removed/test1/images}

为了更好地理解继承人450x100垂直css-sprite菜单的示例。 {HTTP：//移除/ TEST1 /索引}

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

由于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中的空格，它就可以正常工作。

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

1 个答案: