最简单的菜单导航--不兼容IE6

<style type="text/css">
body{width:500px;margin:0 auto;}
* {margin:0;padding:0;font-size:12px;}
.menu li {float:left;list-style:none;position:relative;}
.menu a {display:block;height:32px;width:100px;line-height:32px;

               background:#a9ea00;color:red;text-decoration:none;text-align:center;}
.menu a:hover {background:#5C5C5C;color:#fff;}
.menu ul ul {visibility:hidden;position:absolute;left:0px;top:32px;}
.menu ul li:hover ul{visibility:visible;}
</style>
<div class="menu">
<ul>
<li>
<a href="#">1</a>
<ul>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
</ul>
</li>
<li>
<a href="#">2</a>
<ul>
<li><a href="#">21</a></li>
<li><a href="#">22</a></li>
</ul>
</li>
<li>
<a href="#">3</a>
<ul>
<li><a href="#">31</a></li>
<li><a href="#">32</a></li>
</ul>
</li>
<li>
<a href="#">4</a>
<ul>
<li><a href="#">41</a></li>
<li><a href="#">41</a></li>
</ul>
</li>
</ul>