jquery二级导航菜单，高亮鼠标悬停下拉

紫色风格的jquery二级导航菜单，鼠标悬停高亮显示当前导航，兼容当下主流浏览器。 1、在头部引入5imoban.net.css文件

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

<div class="nav">
    <ul class="nav_list">
      <li class="drop-menu-effect"><a href="http://www.5imoban.net" class="selected2"><span>首页</span></a></li>
      <li class="drop-menu-effect"><a href="http://www.5imoban.net"><span>PSD模板</span></a>
        <ul class="submenu">
          <li><a href="###">企业模板</a></li>
          <li><a href="###">门户网站</a></li>
          <li><a href="###">个人博客</a></li>
          <li><a href="###">行业模板</a></li>
          <li><a href="###">电子商务</a></li>
        </ul>
      </li>
      <li class="drop-menu-effect"><a href="http://www.5imoban.net"><span>CSS模板</span></a>
        <ul class="submenu">
          <li><a href="###">企业模板</a></li>
          <li><a href="###">门户网站</a></li>
          <li><a href="###">个人博客</a></li>
          <li><a href="###">行业模板</a></li>
          <li><a href="###">电子商务</a></li>
        </ul>
      </li>
      <li class="drop-menu-effect"><a href="http://www.5imoban.net"><span>特效插件</span></a>
        <ul class="submenu">
          <li><a href="###">滚动图片</a></li>
          <li><a href="###">广告特效</a></li>
          <li><a href="###">选项卡特效</a></li>
          <li><a href="###">鼠标特效</a></li>
          <li><a href="###">表单按钮</a></li>
          <li><a href="###">表个图层</a></li>
          <li><a href="###">窗口特效</a></li>
          <li><a href="###">文字特效</a></li>
          <li><a href="###">色彩特效</a></li>
          <li><a href="###">图像特效</a></li>
        </ul>
      </li>
      <li class="drop-menu-effect"><a href="http://www.5imoban.net"><span>诗人社团</span></a>
        <ul class="submenu">
          <li><a href="plan_spreed.html">诗赋星家</a></li>
          <li><a href="plan_list.html">社团比拼</a></li>
          <li><a href="plan_list.html">诗友互动</a></li>
        </ul>
      </li>
      <li class="drop-menu-effect"><a href="http://www.5imoban.net"><span>楹联天地</span></a></li>
      <li class="drop-menu-effect"><a href="http://www.5imoban.net"><span>直通纸媒</span></a> </li>
      <li class="drop-menu-effect"><a href="http://www.5imoban.net"><span>我的诗话</span></a></li>
      <li class="drop-menu-effect"><a href="http://www.5imoban.net"><span>阅读欣赏</span></a>
        <ul class="submenu">
          <li><a href="http://www.5imoban.net">自编诗集</a></li>
          <li><a href="http://www.5imoban.net">刊物阅读</a></li>
          <li><a href="http://www.5imoban.net">诗赋欣赏</a></li>
        </ul>
      </li>
      <li class="drop-menu-effect"><a href="http://www.5imoban.net"><span>经典诗库</span></a></li>
    </ul>
  </div>

<script src="http://www.5imoban.net/tpl/js/jquery-1.8.3.min.js"></script>
<script>
function dropMenu(obj){
        $(obj).each(function(){
            var theSpan = $(this);
            var theMenu = theSpan.find(".submenu");
            var tarHeight = theMenu.height();
            theMenu.css({height:0,opacity:0});
            
            var t1;
            
            function expand() {
                clearTimeout(t1);
                theSpan.find('a').addClass("selected");
                theMenu.stop().show().animate({height:tarHeight,opacity:1},200);
            }
            
            function collapse() {
                clearTimeout(t1);
                t1 = setTimeout(function(){
                    theSpan.find('a').removeClass("selected");
                    theMenu.stop().animate({height:0,opacity:0},200,function(){
                        $(this).css({display:"none"});
                    });
                }, 250);
            }
            
            theSpan.hover(expand, collapse);
            theMenu.hover(expand, collapse);
        });
    }

$(document).ready(function(){
    
    dropMenu(".drop-menu-effect");

});
</script>

3、更改里面的中文为您的导航，如果是当前页面，在a链接里面挂上“selected2”这个class即可。


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！