网站上的菜单大部分都是由CSS来实现的，不管是带动画效果，或是不带动画效果，不管是一级菜单或是多级菜单，不管是横向菜单，也不管是竖向菜单，几乎都与CSS关系密切。现在用CSS代码实战一款简洁的绿色导航菜单，是一个基本型菜单，没有使用jQuery，也没有加入动画效果，目的是让CSS新手学会如何制作一个简单的CSS菜单。
先来帖CSS菜单的代码，为了便于理解，这里在关键的地方都加入了注释。
*{margin:0;padding:0;font:18px "微软雅黑";}/*设置网页边距，一般为0，根据自己需要设定，设置字体为18px的微软雅黑*/
ul{list-style:none;}/*取消列表前默认的标号*/
a{display:block; text-align:center;}
a:link,a:visited,a:hover{text-decoration:none;}
a:link{color:white;}
a:visited{color:#F69;}
#wrapper{width:960px;margin:10px auto;}
#nav{height:28px;background:green;/*定义菜单高度为28像素，宽度不设，也就是自适应，背景色为绿色*/}
#nav ul{margin-left:100px;/*定义菜单列表左侧空余100像素，这个可根据自己需要定义，也可以不定义*/}
#nav ul li{
float:left;/*定义菜单项中的每一项都是左浮动，这样后面的菜单项会自动跟在前一个菜单的后面，如果不设置，菜单是竖向排列的*/
width:100px;/*每个菜单项的宽度为100像素*/
line-height:30px;/*菜单行高30像素*/
font-weight:bold;/*字体加粗*/
}
#nav ul li a:hover{
background:lightgreen;/*鼠标移上后，该菜单背景变为浅绿色，也可以写成颜色值*/
color:#000;/*鼠标移上菜单后的菜单文字颜色，可自设*/
}CSS代码写好了，先保存为menu.css文件，下面要引入这个文件，将CSS应用到对像上，下面就是对网页上菜单对象的定义：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一个绿色菜单制作实例</title> <!--下面是引入上面的CSS文件，上述CSS代码可保存为css.css文件--> <link href="css/menu.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="nav"> <ul> <li class="home"><a href="">首页</a></li> <li class="home"><a href="">文章</a></li> <li class="home"><a href="">图片</a></li> <li class="home"><a href="">音乐</a></li> <li class="home"><a href="">视频</a></li> </ul> </div> </div> </body> </html>
好了，将上述页面保存为menu.html，与menu.css文件放在一起，双击运行menu.html，就可看到菜单效果啦，如下图所示：
