则需要制作4张背景图片，每张图片则是一个背景图的两倍高（2h），显示区域设置为一个h，hover效果设置背景图align为bottom。
/* 1为正常显示效果，显示的是背景图片的上半部分；2为hover时显示效果，显示的是黄色区域。 */
具体CSS代码如下：
#thinkjamenu {
list-style: none;
padding: 0;
margin: 0;
width: 200px;
height: 200px;
position: relative;
}
#thinkjamenu span {
display: none;
position: absolute;
}
#thinkjamenug a {
display: block;
text-indent: -900%;/*为了让文字不可见，只表现图片背景的效果*/
position: absolute;
outline: none;
}
#thinkjamenu a:hover {
background-position: left bottom;
}
#thinkjamenu a:hover span {
display: block;
}
#thinkjamenu .home {
width: 200px;
height: 40px;
background: url( 1.jpg) no-repeat;
left: 0px;
top: 0px;
}
#thinkjamenu .home span {
width: 200px;
height: 40px;
background: url(1.jpg) no-repeat;
left: 0px;
top: -40px;
}
#thinkjamenu .blog {
width: 200px;
height: 40px;
background: url( 2.jpg) no-repeat;
left: 0px;
top: 40px;
}
#thinkjamenu .blog span {
width: 200px;
height: 40px;
background: url(2.jpg) no-repeat;
left: 0px;
top: 0px;
}
#thinkjamenu .bbs {
width: 200px;
height: 40px;
background: url( 3.jpg) no-repeat;
left: 0px;
top: 80px;
}
#thinkjamenu .bbs span {
width: 200px;
height: 40px;
background: url( 3.jpg) no-repeat;
left: 0px;
top: 40px;
}
#thinkjamenu .qq {
width: 200px;
height: 40px;
background: url(4.jpg) no-repeat;
left: 0px;
top: 120px;
}
#thinkjamenu .qq span {
width: 200px;
height: 40px;
background: url（4.jpg) no-repeat;
left: 0px;
top: 80px;
}
网页代码：
<ul id="thinkjamenu">
<li><a href="http://www.thinkjam.org" class="home"> 原生脑浆</a></li>
<li><a href="http://www.thinkjam.org/mercury" class="blog">墨神的凡龛</a></li>
<li><a href="http://www.thinkjam.org/bbs" class="bbs">原生脑浆BBS</a></li>
<li><a href="http://www.thinkjam.org/zoptuno" class="qq">just平生一笑</a></li>
</ul>
将网页代码插入需要的区域即可。（注：转载请注明出处）
