一个具有良好视觉网站的建立，离不开几大要素，头部的设计，菜单导航的设计，内容区块的组织，底部的设计等等。可见菜单在网页设计中有着举足轻重的作用，一个漂亮的菜单会为整个网页添加靓丽，也或者一个菜单就“撑”起了整个网页的视觉，成为访客视线的中心。

　　前面的文章中，我们学习了很多关于CSS菜单的知识。你可以参考下面的文章：
　　◎ DIV CSS菜单：纵向CSS菜单实例之橙色记忆 http://www.52css.com/article.asp?id=509
　　◎ DIV CSS菜单实例：红与黑 具有立体质感的CSS菜单 http://www.52css.com/article.asp?id=514
　　◎ 黑白灰 带有阴影效果的CSS横向菜单 http://www.52css.com/article.asp?id=502
　　◎ 一张图片实现鼠标的两种状态及CSS当前页效果 http://www.52css.com/article.asp?id=503

　　今天我们共同来完成一个漂亮的CSS纵向菜单的制作，我给它起了一个名字：蔚蓝色的海洋。我们看最终完成时的效果：


　　下面我们开始制作这款菜单，如果你有兴趣，我们一起动手吧，光说不练是不能很快的提高编码技巧的，只有勤于练习、多动力，会有意想不到的收获。看下面的XHTML代码：


　　上面的XHTML代码没啥好说的了，一个基本的UL无序列表，及若干列表项作为菜单的内容。我们看下面的CSS代码：


　　整体布局声明：文字大小，加粗，去除装饰线，边距及填充，背景色。


　　设置UL无序列表#menu的样式：去除列表项预设标记，上下边距为50px，左右边距为auto，实现水平居中对齐。宽度为200px。


　　设置链接a的样式：块元素，宽度与高度分别是200px、36px，为了实现文字垂直居中于菜单区域我们定义行高为36px，文字缩进36px，文字对齐方式为居左对齐，文字颜色为白色#fff。背景设置为白色，背景图片为“52css.com_a.jpg” 位于 0 0。不重复。

　　设置链接悬停时a:hover的样式，文字缩进增加到46px，背景图片发生了变化，图片变成了“52css.com_b.jpg”。
　　至此，我们的这款菜单就制作完成了。点击这里查看效果！
　　或许你认为在鼠标悬停时文字缩进的改变效果并不好，我们可以去除这一改变一个具有良好视觉网站的建立，离不开几大要素，头部的设计，菜单导航的设计，内容区块的组织，底部的设计等等。可见菜单在网页设计中有着举足轻重的作用，一个漂亮的菜单会为整个网页添加靓丽，也或者一个菜单就“撑”起了整个网页的视觉，成为访客视线的中心。

　　前面的文章中，我们学习了很多关于CSS菜单的知识。你可以参考下面的文章：
　　◎ DIV CSS菜单：纵向CSS菜单实例之橙色记忆 http://www.52css.com/article.asp?id=509
　　◎ DIV CSS菜单实例：红与黑 具有立体质感的CSS菜单 http://www.52css.com/article.asp?id=514
　　◎ 黑白灰 带有阴影效果的CSS横向菜单 http://www.52css.com/article.asp?id=502
　　◎ 一张图片实现鼠标的两种状态及CSS当前页效果 http://www.52css.com/article.asp?id=503

　　今天我们共同来完成一个漂亮的CSS纵向菜单的制作，我给它起了一个名字：蔚蓝色的海洋。我们看最终完成时的效果：


　　下面我们开始制作这款菜单，如果你有兴趣，我们一起动手吧，光说不练是不能很快的提高编码技巧的，只有勤于练习、多动力，会有意想不到的收获。看下面的XHTML代码：


　　上面的XHTML代码没啥好说的了，一个基本的UL无序列表，及若干列表项作为菜单的内容。我们看下面的CSS代码：


　　整体布局声明：文字大小，加粗，去除装饰线，边距及填充，背景色。


　　设置UL无序列表#menu的样式：去除列表项预设标记，上下边距为50px，左右边距为auto，实现水平居中对齐。宽度为200px。


　　设置链接a的样式：块元素，宽度与高度分别是200px、36px，为了实现文字垂直居中于菜单区域我们定义行高为36px，文字缩进36px，文字对齐方式为居左对齐，文字颜色为白色#fff。背景设置为白色，背景图片为“52css.com_a.jpg” 位于 0 0。不重复。

　　设置链接悬停时a:hover的样式，文字缩进增加到46px，背景图片发生了变化，图片变成了“52css.com_b.jpg”。
　　至此，我们的这款菜单就制作完成了。点击这里查看效果！
　　或许你认为在鼠标悬停时文字缩进的改变效果并不好，我们可以去除这一改变。