jquery二级导航菜单，高亮鼠标悬停下拉_网页导航菜单,下拉菜单免费下载_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

特效介绍

jquery二级导航菜单

紫色风格的jquery二级导航菜单，鼠标悬停高亮显示当前导航，兼容当下主流浏览器。

使用方法

1、在头部引入5imoban.net.css文件

2、在你想要放置本导航特效的地方放入下面的代码：

01<div class="nav">
02    <ul class="nav_list">
03      <li class="drop-menu-effect"><a href="http://www.5imoban.net" class="selected2"><span>首页</span></a></li>
04      <li class="drop-menu-effect"><a href="http://www.5imoban.net"><span>PSD模板</span></a>
05        <ul class="submenu">
06          <li><a href="###">企业模板</a></li>
07          <li><a href="###">门户网站</a></li>
08          <li><a href="###">个人博客</a></li>
09          <li><a href="###">行业模板</a></li>
10          <li><a href="###">电子商务</a></li>
11        </ul>
12      </li>
13      <li class="drop-menu-effect"><a href="http://www.5imoban.net"><span>CSS模板</span></a>
14        <ul class="submenu">
15          <li><a href="###">企业模板</a></li>
16          <li><a href="###">门户网站</a></li>
17          <li><a href="###">个人博客</a></li>
18          <li><a href="###">行业模板</a></li>
19          <li><a href="###">电子商务</a></li>
20        </ul>
21      </li>
22      <li class="drop-menu-effect"><a href="http://www.5imoban.net"><span>特效插件</span></a>
23        <ul class="submenu">
24          <li><a href="###">滚动图片</a></li>
25          <li><a href="###">广告特效</a></li>
26          <li><a href="###">选项卡特效</a></li>
27          <li><a href="###">鼠标特效</a></li>
28          <li><a href="###">表单按钮</a></li>
29          <li><a href="###">表个图层</a></li>
30          <li><a href="###">窗口特效</a></li>
31          <li><a href="###">文字特效</a></li>
32          <li><a href="###">色彩特效</a></li>
33          <li><a href="###">图像特效</a></li>
34        </ul>
35      </li>
36      <li class="drop-menu-effect"><a href="http://www.5imoban.net"><span>诗人社团</span></a>
37        <ul class="submenu">
38          <li><a href="plan_spreed.html">诗赋星家</a></li>
39          <li><a href="plan_list.html">社团比拼</a></li>
40          <li><a href="plan_list.html">诗友互动</a></li>
41        </ul>
42      </li>
43      <li class="drop-menu-effect"><a href="http://www.5imoban.net"><span>楹联天地</span></a></li>
44      <li class="drop-menu-effect"><a href="http://www.5imoban.net"><span>直通纸媒</span></a> </li>
45      <li class="drop-menu-effect"><a href="http://www.5imoban.net"><span>我的诗话</span></a></li>
46      <li class="drop-menu-effect"><a href="http://www.5imoban.net"><span>阅读欣赏</span></a>
47        <ul class="submenu">
48          <li><a href="http://www.5imoban.net">自编诗集</a></li>
49          <li><a href="http://www.5imoban.net">刊物阅读</a></li>
50          <li><a href="http://www.5imoban.net">诗赋欣赏</a></li>
51        </ul>
52      </li>
53      <li class="drop-menu-effect"><a href="http://www.5imoban.net"><span>经典诗库</span></a></li>
54    </ul>
55  </div>

01<script src="http://www.5imoban.net/tpl/js/jquery-1.8.3.min.js"></script>
02<script>
03function dropMenu(obj){
04        $(obj).each(function(){
05            var theSpan = $(this);
06            var theMenu = theSpan.find(".submenu");
07            var tarHeight = theMenu.height();
08            theMenu.css({height:0,opacity:0});
09             
10            var t1;
11             
12            function expand() {
13                clearTimeout(t1);
14                theSpan.find('a').addClass("selected");
15                theMenu.stop().show().animate({height:tarHeight,opacity:1},200);
16            }
17             
18            function collapse() {
19                clearTimeout(t1);
20                t1 = setTimeout(function(){
21                    theSpan.find('a').removeClass("selected");
22                    theMenu.stop().animate({height:0,opacity:0},200,function(){
23                        $(this).css({display:"none"});
24                    });
25                }, 250);
26            }
27             
28            theSpan.hover(expand, collapse);
29            theMenu.hover(expand, collapse);
30        });
31    }
32 
33$(document).ready(function(){
34     
35    dropMenu(".drop-menu-effect");
36 
37});
38</script>