这个是由JS实现的，非常简洁，大家一看就能懂。
<title>滑动下拉导航菜单</title>
<style>
body{background-color: black;}
*{list-style:none; text-decoration:none; margin:0;padding:0;}
.nav{width:980px; margin:0 auto; background:url(nav.png) repeat-x;}
.nav_1{height:40px; line-height:40px; display:block;}
.nav_1 li{float:left; width:105px; text-align:center;}
.nav_1 li a{height:100%; padding:0 8px;color:#fff; font-size:14px; display:block;}
.nav_1 li a:hover{color:#333;background:#FFF; font-weight:bold;}
.dropMenu{position:absolute;z-index:100; width:105px; margin-top:-1px; padding:6px 0; background-color:white; visibility:hidden; }
.dropMenu li{height:35px; line-height:35px; overflow:hidden; text-align:center; }
.dropMenu li a{height:100%;color:#333333; text-decoration:none;font-size:12px; color:#ff0000;display:block;}
.dropMenu li a:hover{color:#FF0000; background-color:#ff0000; color:white; font-weight:bold;}
</style>
</head>
<body>
<!--头部Start-->
<div class="nav" id="navMenu">
<ul class="nav_1">
<li><a href="/">网站首页</a></li>
<li><a href="#" rel="drop1">关于我们</a></li>
<li><a href="#" rel="drop2">课程设置</a></li>
<li><a href="#" rel="drop3">经典案例</a></li>
<li><a href="#" rel="drop4">师资介绍</a></li>
<li><a href="#" rel="drop5">招生信息</a></li>
<li><a href="#" rel="drop6">作品展示</a></li>
<li><a href="#" rel="drop7">新闻资讯</a></li>
<li><a href="#" rel="drop8">联系我们</a></li>
</div>
<!--头部end-->
<!--导航滑动子菜单-->
<script type='text/javascript' src='dropdown.js'></script>
<ul id="drop1" class="dropMenu">
<li><a href="#">111111111111</a></li>
<li><a href="#">111111111111</a></li>
<li><a href="#">111111111111</a></li>
<li><a href="#">111111111111</a></li>
<li><a href="#">111111111111</a></li>
<li><a href="#">111111111111</a></li>
</ul>
<ul id="drop2" class="dropMenu">
<li><a href="#">2222222222</a></li>
<li><a href="#">2222222222</a></li>
<li><a href="#">2222222222</a></li>
<li><a href="#">2222222222</a></li>
<li><a href="#">2222222222</a></li>
<li><a href="#">2222222222</a></li>
</ul>
<ul id="drop3" class="dropMenu">
<li><a href="#">333333333333</a></li>
<li><a href="#">333333333333</a></li>
<li><a href="#">333333333333</a></li>
<li><a href="#">333333333333</a></li>
<li><a href="#">333333333333</a></li>
<li><a href="#">333333333333</a></li>
</ul>
<ul id="drop4" class="dropMenu">
<li><a href="#">44444444444</a></li>
<li><a href="#">44444444444</a></li>
<li><a href="#">44444444444</a></li>
<li><a href="#">44444444444</a></li>
<li><a href="#">44444444444</a></li>
<li><a href="#">44444444444</a></li>
</ul>
<ul id="drop5" class="dropMenu">
<li><a href="#">5555555555555</a></li>
<li><a href="#">5555555555555</a></li>
<li><a href="#">5555555555555</a></li>
<li><a href="#">5555555555555</a></li>
<li><a href="#">5555555555555</a></li>
<li><a href="#">5555555555555</a></li>
</ul>
<ul id="drop6" class="dropMenu">
<li><a href="#">666666666666</a></li>
<li><a href="#">666666666666</a></li>
<li><a href="#">666666666666</a></li>
<li><a href="#">666666666666</a></li>
<li><a href="#">666666666666</a></li>
<li><a href="#">666666666666</a></li>
</ul>
<ul id="drop7" class="dropMenu">
<li><a href="#">777777777777</a></li>
<li><a href="#">777777777777</a></li>
<li><a href="#">777777777777</a></li>
<li><a href="#">777777777777</a></li>
<li><a href="#">777777777777</a></li>
<li><a href="#">777777777777</a></li>
</ul>
<ul id="drop8" class="dropMenu">
<li><a href="#">8888888888888</a></li>
<li><a href="#">8888888888888</a></li>
<li><a href="#">8888888888888</a></li>
<li><a href="#">8888888888888</a></li>
<li><a href="#">8888888888888</a></li>
<li><a href="#">8888888888888</a></li>
</ul>
<script type="text/javascript">cssdropdown.startchrome("navMenu")</script>
<!--底部end-->
效果如下：
下载地址：滑动下拉导航菜单
