css3动画下拉的多级菜单，有淡入淡出的效果。在pc端和手机上完全不一样的效果。
淘建站为您提供更多_导航菜单_下拉导航_响应式_导航，在此特别感谢您对我们的支持与厚爱！
查看演示
演示不了，点击反馈
加入收藏
下载 450 次
打赏作者
觉得不错，可打赏下作者
下载资源
免费共享
特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。
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.sucaiq.com" />
</form>
</li>
</ul>接着引入jQuery库和venus插件即可。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="venus.js"></script>
