利用CSS制作竖直排列菜单
作为一个成功的网站，导航菜单是永远不可缺少的。导航菜单的风格往往也决定了整个网站的风格，因此很多设计者都会投入很多时间和精力来制作各式各样的导航条，从而体现网站的整体构架。
在传统方式下，制作导航菜单是很麻烦的工作。需要使用表格，设置复杂的属性，还需要使用JavaScript实现相应鼠标指针经过或点击动作。如果用CSS来制作导航菜单，实现起来就非常简单了。实例的最终效果如下图所示。
操作方法
- 01
首先建立HTML相关结构，将菜单的各个项用项目列表<ul>表示，同时设置页面的背景颜色，代码如下。 <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Web Dev</a></li> <li><a href="#">Web Design</a></li> <li><a href="#">Map</a></li> </ul> </div>
- 02
然后开始设置CSS样式，首先把页面的背景色设置为浅色，代码如下。 body{ background-color:#dee0ff; } 此时页面的效果只是最普通的项目列表。
- 03
设置整个<div>块的宽度为固定150像素，并设置文字的字体。设置项目列表<ul>的属性，将项目符号设置为不显示。 #navigation { width:150px; font-family:Arial; font-size:14px; text-align:right } #navigation ul { list-style-type:none; /* 不显示项目符号 */ margin:0px; padding:0px; } 通过以上设置后，项目列表使显示为普通的超链接列表。
- 04
为<li>标记添加下边线，以分割各个超链接，并且对超链接<a>标记进行整体设置，如下所示。 #navigation li { border-bottom:1px solid #9F9FED; /* 添加下划线 */ } #navigation li a{ display:block; height:1em; padding:5px 5px 5px 0.5em; text-decoration:none; border-left:12px solid #151571; /* 左边的粗边 */ border-right:1px solid #151571; /* 右侧阴影 */ } 以上代码中需要特别说明的是“display:block;”语句，通过该语句，超链接被设置成了块元素。当鼠标指针进入该块的任何部分时都会被激活，而不是仅在文字上方时才被激活。
- 05
最后设置超链接的样式，以实现动态菜单的效果，代码如下。 #navigation li a:link, #navigation li a:visited{ background-color:#1136c1; color:#FFFFFF; } #navigation li a:hover{ /* 鼠标经过时 */ background-color:#002099; /* 改变背景色 */ color:#ffff00; /* 改变文字颜色 */ border-left:12px solid yellow; } 代码的具体含义都在注释中一一说明了，这里不再重复。此时导航菜单便制作完成了，最终的效果如效果图所示，在IE与Firefox两种浏览器中的显示效果是一致的。