<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>menu</title>
<style type="text/css">
<!--
div{margin:100px;width:200px;}
li{background:#ccc;}
li ul {display:none;}
li:hover ul{display:block;}
-->
</style>
</head>
<body>
<div>
<li><a href='#'>Menu</a>
<ul>
<li><a href='#'>one</a></li>
<li><a href='#'>two</a></li>
<li><a href='#'>three</a></li>
<li><a href='#'>four</a></li>
</ul>
</li>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>menu</title>
<style type="text/css">
<!--
div{margin:100px;width:200px;}
li{background:#ccc;}
li ul {display:none;}
li:hover ul{display:block;}
-->
</style>
</head>
<body>
<div>
<li><a href='#'>Menu</a>
<ul>
<li><a href='#'>one</a></li>
<li><a href='#'>two</a></li>
<li><a href='#'>three</a></li>
<li><a href='#'>four</a></li>
</ul>
</li>
</div>
</body>
</html>
原理是通过 :hover来控制<li>的显示也消失。任何<li>中的<ul>都会被初始化为隐藏。当鼠标悬停的时候才会显示。
但是IE6和更早的版本不支持li:hover。其他浏览器包括Safari for windows，firefox3，IE7，Opera都可以实现下拉菜单的效果。
这个是在一本讨论JS的书上看到的方法。个人觉得如果需要制作相同的下拉菜单的话，用CSS实现比较省事。但绝大多数人都习惯通过JS实现。撇开IE6的支持的问题。我觉得更多的时候只是个人选择的问题。当习惯了用JS实现并且已经有一套成熟的方法的时候，何乐而不为呢？呵呵。
关于IE6的问题。我觉得这个不是问题。已经可以忽略IE6了吗？我觉得现在不行，但是时间不会很久。毕竟IE8都出了。