专注优质Wordpress企业网站搭建与优化

一花一世界 – CSS实例教程：水彩风格CSS菜单（下）

原文地址：Advanced CSS Menu

翻译整理：西米CC

在设计好素材图片和HTML代码结构之后，我们就可以开始编写相应的CSS样式了。

#menu 样式：

把菜单的内外边距设置为0，并去掉列表项的项目符号，特别要注意的是其中的width和height值必须跟它的背景图片menu-bg.jpg的尺寸一致。最后，把菜单的定位属性设置为相对定位relative：

#menu span 样式：
通过display:none将span标签设置为默认不可见，然后设置其为绝对定位，然后我们就可以精确的定位鼠标滑过的GIF图像了：

#menu a 样式：

这里我们最主要的是通过设置文本缩进text-indent属性来隐藏文本：

#menu a:hover 样式：

图像翻转的效果就是在这个样式中定义的：

#menu a:hover span 样式：

当鼠标滑过超链接时，我们将span元素转换为块级对象：

#menu .home 样式：

该样式为”home”项的链接定义宽、高以及背景图像。因为我们已经为标签a定义了绝对定位属性，现在我们只要简单的设置它相对左上角的坐标就可以了：

#menu .home span 样式：

此样式用于定义当鼠标滑过home链接时，在span标签中背景图像的尺寸：

关于”about”和”rss”的样式基本和”home”相同，只要把尺寸和背景图像左相应的修改就可以了。