垂直导航菜单中使用css精灵的问题

Question

我想创建一个使用CSS精灵的垂直导航菜单。我想在菜单选项滑出一点的地方放一个悬停效果。

a:link { 
    background: url(images/nav.png); 
    background-position: -100px 0px; 
    width: 150px; 
} 

a:hover { 
    background: url(images/nav.png); 
    background-position: -100px 0px; 
    width: 160px; 
} 

所以我使用相同的精灵图像：a link和a：hover。我只是在增加宽度的情况下：悬停来创建弹出效果。

考虑这个比喻。如果我的选项卡全部在x = 0处对齐，那么这是我目前的场景。

a:link tab start: x=-100 tab end: x=0 // this is how all links are arranged 
a:hover tab start: x=-110 tab end: x=0 // this is how I want them on hover 
a:hover tab start: x=-100 tab end: x=10 // this is how its panning out 

这里是我完整的CSS代码：

#navmenu { 
    left: 100px; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    top: 150px; 
    width: 150px; 
    z-index: 99; 
} 

#navmenu ul { 
    list-style-type: none; 
    margin: 0px; 
    padding: 0px; 
} 

#navmenu ul li { 
    line-height: 1.5em; 
    padding: 0px; 
} 

#navimenu ul li a { 
    color: black; 
    display: block; 
    font-weight: bold; 
    height: 26px; 
    padding: 0px 15px 0px 0px; 
    text-align: right; 
    width: 150px; 
} 

#navmenu a:link, #navmenu a:visited { 
    background: url(images/nav.png) no-repeat; 
    background-position: -150px 0px; 
    width: 150px; 
} 

#navmenu a:hover { 
    background: url(images/nav.png) no-repeat; 
    background-position: -150px 0px; 
    width: 160px; 
} 

有人可以帮我在这里？

感谢

Answer 1

好吧，如果你想将它向上或向下移动，那么你应该改变y位置（即第二），如果你希望它滑向左或向右，你应该改变x位置：

background-position: x y; 

所以，如果我理解正确的话，你要保持左对齐的背景图像，甚至当你将鼠标悬停在链接：

#navmenu a:hover { 
    background: url(images/nav.png) no-repeat -160px 0; 
    width: 160px; 
} 

这就是你想？

顺便说一句，你的问题有点模糊。你说图像的大小是“增加到右边”（我不知道你的意思，但它涉及到X轴），然后你开始谈论“基地”和“头” （y轴）