js蓝色通用滑动导航菜单显示下拉菜单效果

收藏

分享一个蓝色横向二级下拉菜单菜单，当鼠标悬浮在一级导航菜单上，显示对应的子集下拉菜单。兼容性很好，包括IE6。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

一级导航菜单html代码

<div id="nav">
    <ul id="navMenu">
        <li><a href="http://www.erdangjiade.com/">首页</a></li>
        <li><a href="http://www.erdangjiade.com/" rel='dropmenu1'>jquery 特效</a></li>
        <li><a href="http://www.erdangjiade.com/" rel='dropmenu2'>js特效</a></li>
        <li><a class="current" href="http://www.erdangjiade.com/" rel='dropmenu3'>flash特效</a></li>
        <li><a href="http://www.erdangjiade.com/" rel='dropmenu4'>div+css教程</a></li>
        <li><a class="last" href="http://www.erdangjiade.com/" rel='dropmenu5'>html5教程</a></li>
    </ul>
</div>

根据一级菜单的rel属性，对应二级下拉菜单ul id

<ul id="dropmenu1" class="dropMenu">
    <li><a href="http://www.erdangjiade.com/">jquery图片特效</a></li>
    <li><a href="http://www.erdangjiade.com/">jquery导航菜单</a></li>
    <li><a href="http://www.erdangjiade.com/">jquery选项卡特效</a></li>
    <li><a href="http://www.erdangjiade.com/">jquery文字特效</a></li>
    <li><a href="http://www.erdangjiade.com/">jquery表单特效</a></li>
    <li><a href="http://www.erdangjiade.com/">jquery表格特效</a></li>
</ul>
<ul id="dropmenu2" class="dropMenu">
    <li><a href="http://www.erdangjiade.com/">js图片特效</a></li>
    <li><a href="http://www.erdangjiade.com/">js导航菜单</a></li>
    <li><a href="http://www.erdangjiade.com/">js选项卡特效</a></li>
    <li><a href="http://www.erdangjiade.com/">js文字特效</a></li>
    <li><a href="http://www.erdangjiade.com/">js表单特效</a></li>
    <li><a href="http://www.erdangjiade.com/">js表格特效</a></li>
</ul>

引入dropdown下拉菜单插件

<script type='text/javascript' src='js/dropdown.js'></script>
<script type="text/javascript">cssdropdown.startchrome("navMenu")</script>