示例代码：
<!DOCTYPE html>
<html>
<head>
<STYLE type=text/css>
body { font-family: arial, ̎ͥ, serif; font-size:12px; padding:10px }
#nav { line-height: 24px; list-style-type: none; background:#666; }
#nav a { display: block; 80px; text-align:center; }
#nav a:link { color:#666; text-decoration:none; }
#nav a:visited { color:#666;text-decoration:none; }
#nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; }
#nav li { float: left; 80px; background:#CCC; }
#nav li a:hover{ background:#999; }
#nav li ul { line-height: 27px; list-style-type: none;text-align:left; visibility : hidden; 180px; position: absolute; padding: 5px}
#nav li ul li{ float: left; 180px; background: #F6F6F6; }
#nav li ul a{ display: block; 180px; 156px;text-align:left;padding-left:24px; }
#nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00; }
#nav li:hover ul { visibility : visible; }
</STYLE>
</head>
<body>
<UL id=nav>
<LI><A href="#">menu1</A>
<UL>
<LI><A href="#">menu1.1</A></LI>
<LI><A href="#">menu1.2</A></LI>
<LI><A href="#">menu1.3</A></LI>
<LI><A href="#">menu1.4</A></LI></UL></LI>
<LI><A href="#">menu2</A>
<UL>
<LI><A href="#">menu2.1</A></LI>
<LI><A href="#">menu2.2</A></LI>
<LI><A href="#">menu2.3</A></LI>
<LI><A href="#">menu2.4</A></LI></UL></LI>
<LI><A href="#">menu3</A>
<UL>
<LI><A href="#">menu3.1</A></LI>
<LI><A href="#">menu3.2</A></LI>
<LI><A href="#">menu3.3</A></LI>
<LI><A href="#">menu3.4</A></LI></UL></LI>
</UL>
</body>
</html>
自己简单解析一下:
上面代码中,实现下拉式菜单主要是利用鼠标事件来改变css样式
先利用css中的#nav li ul 将visiblity属性设置为hidden，将子菜单隐藏起来；
再利用#nav li:hover ul { visibility : visible; }，当有鼠标进入时，将子菜单显示出来。