多级css3响应式下拉导航

css3动画下拉的多级菜单，有淡入淡出的效果。在pc端和手机上完全不一样的效果。

分类：导航菜单 > 下拉导航难易：中级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

HTML

首先我们看下菜单HTML结构：

<ul class="venus-menu">
    <li class="active"><a href="#"><i class="icon-home"></i>Home</a></li>
    <li><a href="#"><i class="icon-magic"></i>About</a></li>
    <li>
        <a href="#"><i class="icon-thumbs-up"></i>Services</a>
        <ul>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Hosting</a></li>
            <li>
                <a href="#">Design</a>
                <ul>
                    <li><a href="#">Graphics</a></li>
                    <li><a href="#">Vectors</a></li>
                    <li>
                        <a href="#">Photoshop</a>
                        <ul>
                            <li><a href="#">Photo editing</a></li>
                            <li><a href="#">Business cards</a></li>
                            <li><a href="#">Websites</a></li>
                            <li><a href="#">Flyers</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Fonts</a></li>
                </ul>
            </li>
            <li><a href="#">Consulting</a></li>
        </ul>
    </li>
    <li><a href="#"><i class="icon-quote-right"></i>Blog</a></li>
    <li><a href="#"><i class="icon-envelope-alt"></i>Contact</a></li>
    <li class="search">
        <form method="get">
            <input type="text" name="search" class="search" placeholder="www.sucaihuo.com" />
        </form>
    </li>
</ul>

接着引入jQuery库和venus插件即可。

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="venus.js"></script>