由CSS来创建 下拉菜单

现在有各种各样的工具来帮助生成漂亮的下拉菜单，  本文使用HTML 和简单的CSS，来创建一个简单的竖直的下拉菜单。

首先：创建菜单

我们先由如下的html来创建一个无顺序的list

<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a> 
      <ul> 
        <li><a href="#">History</a></li> 
        <li><a href="#">Team</a></li> 
        <li><a href="#">Offices</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Class</a> 
      <ul> 
        <li><a href="#">English</a></li> 
        <li><a href="#">Internet 
            Marketing</a></li> 
        <li><a href="#">Math</a></li> 
        <li><a href="#">Programming</a></li> 
      </ul> 
    </li>
    <li><a href="#">Contact Us</a> 
      <ul> 
        <li><a href="#">EMail</a></li> 
        <li><a href="#">Phone</a></li> 
        <li><a href="#">Post</a></li> 
      </ul> 
    </li> 
  </ul>

来浏览一下，如下，这样可以很方便的进行修改。

美化

1.去除缩进和前面的点

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	}

如下

2. 确定位置

ul li {
	position: relative;
	}
li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	}

并将子菜单隐藏,如下

3. 加边框

ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

4. 显示子菜单

li:hover ul { display: block; } /*  The magic */

这样就可以了， 不过发现 IE6 不支持这种方式，

于是就可以使用下面的简单的javascript

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.οnmοuseοver=function() {
this.className+=" over";
  }
  node.οnmοuseοut=function() {
  this.className=this.className.replace»
	(" over", "");
   }
   }
  }
 }
}
window.οnlοad=startList;

但是，要把CSS简单的修改一下

li:hover ul, li.over ul { 
	display: block; }

同时把第一个ul修改为如下的内容， 加一个id

<ul id="nav">

这样就可以了