svip

用js实现导航鼠标放置主菜单后显示所有子菜单方法提前必须引入SuperSlide
类似下面截图

css部分：

1. nav { height: 40px; }
   
2. .nav_wrap { height: 40px; line-height: 40px; }
   
3. .nav_item { position: relative; margin-right: 10px; }
   
4. .nav_item span a { font-size: 14px; color: #000; display: block; padding: 0 15px; text-align: center; }
   
5. .nav_item_r { float: right; background: #e8b856; border-radius: 6px; position: absolute; top: -3px; right: 0;  }
   
6. .nav_item_r span a { line-height: 58px; height: 58px; }
   
7. .sub { background: #fff; background: rgba(255,255,255,0.97); box-shadow: 0 20px 30px rgba(0,0,0,.1); position: absolute; display: none; z-index: 9; left: 0; border-radius:0 10px 10px 10px; }
   
8. .sub_index { position: absolute; }
   
9. .sub_wrap { min-width: 170px; min-height: 100px; padding:15px 20px 15px 30px; position: relative; }
   
10. .sub_wrap a { display: block; line-height: 20px; float: left; width: 45%; margin:8px 5% 8px 0;}
    
11. .nav_item { position:relative;  transition:0.1s all linear; cursor:pointer; float: left; margin-top: 33px;}
    
12. .nav_item::before {content:""; position:absolute; bottom:0px; left:100%; width:0; height:3px;background: #ff7c24; transition:0.1s all linear;}
    
13. .nav_item:hover::before { width:100%; bottom:0px; left:0; transition-delay:0.1s; }
    
14. .nav_item:hover ~ li::before {left:0;}
    
15. .nav_item:active {background:rgba(0,0,0,0.1);color:#fff;}
    
16. .nav_mobile { font-size: 12px; cursor: pointer; margin-right: 0; margin-left:10px;}
    
17. .nav_mobile span a { padding: 0!important; font-size: 12px; }
    
18. .sub_mobile { padding: 10px 5px; border-radius: 10px; line-height: 20px; text-align: center; left: 50%; margin-left: -60px; }
    
19. .sub_mobile_itme { width: 100px; padding:0 5px; }
    
20. .sub_mobile img { width: 100%; }
    
21. .sub_mobile span { margin-top: 4px; display: block; color: #666; }
    
22. .nav_mobile em { margin-right: 4px; font-size: 12px; }
    
23. /**/
    
24. .nav2 {float: left; }
    
25. .nav2 .nav_wrap { line-height: 50px; height: 50px; position: relative; }
    
26. .nav2 .nav_item span a { font-size: 16px; }
    
27. 
    
28. .nav3 { height: 50px; }
    
29. .nav3 li { float: left;  }

复制代码

html部分：

1. <nav id="nav" class="nav2">
   
2. <div class="in_nav main">
   
3. <ul class="nav_wrap">
   
4. <li class="nav_item nli ts fl">
   
5. <span><a href="/" target="_blank" title="网站首页">首页</a></span>
   
6. </li>
   
7. <li class="nav_item nli ts fl">
   
8. <span><a href="/" target="_blank" title="主菜单">主菜单</a></span>
   
9. <div class="sub sub_index">
   
10. <div class="sub_wrap">
    
11. <a href="/" target="_blank" title="子菜单1"><span>子菜单1</span></a>
    
12. <a href="/" target="_blank" title="子菜单2"><span>子菜单2</span></a>
    
13. <a href="/" target="_blank" title="子菜单3"><span>子菜单3</span></a>
    
14. <div class="clear"></div>
    
15. </div>
    
16. </div>
    
17. </li>
    
18. </ul>
    
19. </div>
    
20. </nav>

复制代码

js：

1. $(function(){
   
2.     jQuery("#nav").slide({ type:"menu", titCell:".nli", targetCell:".sub",effect:"slideDown",delayTime:100,triggerTime:0,returnDefault:true});
   
3. });

复制代码