CSS Sprites
Tjena,
Håller på med en hemsida, vilket jag inte gjort på många år. Har lite problem med menyn som är byggd med css sprites. Har bara tillfällig info än så länge så därför ser det ut som det gör. Hur som helst, här är menyn:
<ul id="menu">
<li><a href="#" class="item1">MenuItem 1</a></li>
<li><a href="#" class="item2">MenuItem 2</a></li>
<li><a href="#" class="item3">MenuItem 3</a></li>
<li><a href="#" class="item4">MenuItem 4</a></li>
</ul>
Medföljande CSS:
#menu
{
list-style: none;
padding: 0;
margin: 0 auto;
width: 960px;
height: 100px;
}
#menu li
{
display: inline;
}
#menu li a
{
height: 100px;
text-indent: -900%;
float: left;
}
#menu .item1
{
width: 240px;
height: 100px;
background: url(images/menu_bg.png) no-repeat;
}
#menu .item2
{
width: 240px;
height: 100px;
background: url(images/menu_bg.png) no-repeat -240px 0px;
}
#menu .item3
{
width: 240px;
height: 100px;
background: url(images/menu_bg.png) no-repeat -480px 0px;
}
#menu .item4
{
width: 240px;
height: 100px;
background: url(images/menu_bg.png) no-repeat -720px 0px;
}
Så långt fungerar det bra, bilderna visas som de ska. Det jag har problem med är att få bilden att skifta läge vid mouse hover. Den ska skifta med -100px vertikalt. Har provat med:
#menu .item2 a:hover {background: url(images/menu_bg.png) no-repeat -240px -100px;}
Men det fungerar inte, någon som är vass på detta som har lust att hjälpa mig?
