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