原文地址：Advanced CSS Menu
翻译整理：西米CC
在设计好素材图片和HTML代码结构之后，我们就可以开始编写相应的CSS样式了。
#menu 样式：
把菜单的内外边距设置为0，并去掉列表项的项目符号，特别要注意的是其中的width和height值必须跟它的背景图片menu-bg.jpg的尺寸一致。最后，把菜单的定位属性设置为相对定位relative：
#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
}
#menu span 样式：
通过display:none将span标签设置为默认不可见，然后设置其为绝对定位，然后我们就可以精确的定位鼠标滑过的GIF图像了：
#menu span {
display: none;
position: absolute;
}
#menu a 样式：
这里我们最主要的是通过设置文本缩进text-indent属性来隐藏文本：
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover 样式：
图像翻转的效果就是在这个样式中定义的：
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span 样式：
当鼠标滑过超链接时，我们将span元素转换为块级对象：
#menu a:hover span {
display: block;
}
#menu .home 样式：
该样式为”home”项的链接定义宽、高以及背景图像。因为我们已经为标签a定义了绝对定位属性，现在我们只要简单的设置它相对左上角的坐标就可以了：
#menu .home {
width: 144px;
height: 58px;
background: url(images/home.gif) no-repeat;
left: 96px;
top: 73px;
}
#menu .home span 样式：
此样式用于定义当鼠标滑过home链接时，在span标签中背景图像的尺寸：
#menu .home span {
width: 86px;
height: 14px;
background: url(images/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}
关于”about”和”rss”的样式基本和”home”相同，只要把尺寸和背景图像左相应的修改就可以了。