CSS + DIV 的问题

Question

要做的效果如上图
我想做一个导航，背景是用一张图片的，能不能做到当我点击链接的时候就将背景图片往下移？？
<style>
ul{background:url(bg.png) no-reapt 0 0;}
ul li a:hover{这里应怎么写？我需要的是当点击资讯的时候背景的位置是 background-position:-35px -35px; 点击行情的时候背景的位置是 background-position:-85px -35px; }
</style>
不能改变<ul>的内容，可以往下添加div
<ul>
<li><a href="">首页</a></li>
<li><a href="">资讯</a></li>
<li><a href="">行情</a></li>
<li><a href="">特色</a></li>
<li><a href="">论坛</a></li>
</ul>
谢谢，如果能用js实现也可以

Answer 1

楼主想用的是CSS Sprites效果。但“当我点击链接的时候就将背景图片往下移”是什么意思，应该是Hover状态时该li背景变成下面的绿色背景吧。这样的话，没有必要为ul指定背景图，为每个li指定背景图位置就行了(no-repeat拼写出错)。假设代码如下：<nav><ul><li><a&nbsp;class="index"&nbsp;href="#">首页</a</li><li><a&nbsp;class="info"&nbsp;href="#">资讯</a</li></ul></nav>css如下nav&nbsp;ul&nbsp;{&nbsp;width:***px;height:50px;&nbsp;}&nbsp;nav&nbsp;ul&nbsp;li&nbsp;{&nbsp;width:35px;height:50px;float:left;text-indent:-9999px;&nbsp;}&nbsp;nav&nbsp;a&nbsp;{&nbsp;width:35px;height:50px;display:block;background:url(bg.png)&nbsp;0&nbsp;0;&nbsp;}&nbsp;nav&nbsp;a.info&nbsp;{&nbsp;background-position:-35px&nbsp;-35px;&nbsp;}nav&nbsp;a:hover&nbsp;{&nbsp;background-position:0&nbsp;-35px;&nbsp;}&nbsp;nav&nbsp;a.info:hover&nbsp;{&nbsp;background-position:-35px&nbsp;-85px;&nbsp;}上面的尺寸根据背景图来定。