这一行是定义鼠标移上去后SPAN的效果；这里我用的绝对定位，但用了绝对定位后，SPAN的内容就会把图片给遮住；所以我又加了一句margin-top:10px;意思是把SPAN的内容向上移动10PX；用display:block定义一下以块级元素显示；其它的不说了；
#zishu_test li a:hover span{ margin-top:-10px;display:block; border-bottom:1px solid #666; border-right:1px solid #666; background:#FA9000; width:100px; color:#FFF; position:absolute; }
//以下这行是定义A里边内容的效果；有了个边框，但是白色，所以你看不到，又加了个背景色也是白的，你也看不到。你可以试着改成别的色，看一下效果；
#zishu_test li a{border-right:1px solid #fff;border-bottom:1px solid #fff; width:100px; height:110px; background:#fff;display:block; padding-top:10px; margin:auto}
//以下这行是定义鼠标移上去后A里边内容的效果；给边框改一个色，改了个背景色等；
#zishu_test li a:hover{ border-right:1px solid #D8A18B;border-bottom:1px solid #D8A18B; width:100px; height:110px; background:#F5F5F5;display:block; padding-top:10px;}

以下是这时的效果，基本全部完事了。

Source Code to Run []

[ 可先修改部分代码 再运行查看效果 ]

但这时，你会发现，在IE6和IE7以及FIREFOX中的SPAN的的位置都不一样；由于IE7不熟悉important;所以用下边两行代码分别为IE6和IE7分别设置一下；

Example Source Code []

//以下两行代码分别只有IE6和IE7才能熟悉；别的不认
* html #zishu_test li a:hover span {margin-left:-8px; } /* IE6 */
* html #zishu_test li a:hover span {margin-left:-8px; }/* IE7*/

好了，全部的就完了，其实一点也不难；但可能是新手还不熟吧；

Source Code to Run []

[ 可先修改部分代码 再运行查看效果 ]

我语言表达能力不行，可能有些地方一些新手还是看不太明白；那。。。那。。。我也没有办法；你多试几下就明白了；
另外；这样的代码还能优化一点；但我没有优化；因为一些优化过的；别人更不好理解了；
再另外；这里边的错别字一定相当多；我没有没有检查；有错字或读不通的地方；你就多猜一下吧；
本文作者：zishu