0

現在、background-positioningを使用して150wx300hdiv内に垂直css-spriteメニューを作成しようとしています。

{http://removed/test1/images}

ここでよりよく理解するために、450x100の垂直css-spriteメニューの例を示します。{http：// removed / test1 / index}

私が現在抱えている主な問題は、divに750x100の垂直方向の画像を配置することです。更新するとsidemen.pngが消えますが、マウスをその上に置くと、そこに表示ブロック（リンク）が表示されます。{http：// removedtest2 / index}

cssメニューは50の高さのピクセルのブロックで表示されるため、メニューはぴったりと収まるはずです。 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>
4

1 に答える 1

2

それはあなたのファイル名です。

sidemen .png の前のスペースを削除するだけで、.png正常に機能するはずです。

于 2012-12-13T09:27:05.513 に答える