Sliding horizontal level Two menu jquery effects

Effect

JS Code

The code is as follows

Copy Code

<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script> <script> $ (function () { var navli=$ (". menu. Nav li"); Navli.mouseover (function () { $ (this). Find ("a"). AddClass ("current"); $ (this). Find (". Box"). Stop (). Slidedown (); }) Navli.mouseleave (function () { $ (this). Find ("a"). Removeclass ("current"); $ (this). Find (". Box"). Stop (). Slideup (); }) }) </script> CSS Code <style> *{margin:0;padding:0;} . Menu{width:100%;height:80px;background: #efefef;} . menu. nav{width:960px;height:80px;margin:0 Auto; . menu. Nav li{float:left;list-style:none; . menu. Nav Li a{display:block;height:80px;/*border-left:1px solid #000; */padding:0 10px;line-height:90px;color:gray;text-decoration:none;position:relative;overflow:hidden;} . menu. Nav li A:hover,.menu. Nav li a.current{background: #000; color: #fff;} . menu. Nav li. Box{width:100%;height:50px;position:absolute;top:80px;left:0;padding-left:200px;background: #000; Display:none;} . menu. Nav li. Box a{display:block;height:50px;float:left;color: #fff; line-height:50px;border:none;background:none;} . menu. Nav li. Box a:hover{text-decoration:underline;color: #46bd01} </style> HTML code <div class= "Menu" > <ul class= "NAV" > <li> <a href= "Http://www.111cn.net" > Understanding Oulusa </a> <div class= "box" > <a href= "http://www.111cn.net" > Group profile </a> <a href= "Http://www.111cn.net" > Brand history </a> <a href= "Http://www.111cn.net" > Production Enterprise Culture </a> <a href= "Http://www.111cn.net" > Honors </a> <a href= "Http://www.111cn.net" > Oulusa Business School </a> <a href= "Http://www.111cn.net" > Charity </a> <a href= "http://www.111cn.net" > Careers </a> </div> </li> <li><a href= "Http://www.111cn.net" > Innovative Technology </a></li> <li> <a href= "http://www.111cn.net" > Product Center </a> <div class= "box" > <a href= "http://www.111cn.net" > Smart Cover </a> <a href= "http://www.111cn.net" > Diamond shower room </a> <a href= "http://www.111cn.net" > Fashion bathroom home?h</a> <a href= "Http://www.111cn.net" > Embedded </a> <a href= "http://www.111cn.net" > Classical bathroom home?h</a> <a href= "Http://www.111cn.net" > More </a> </div> </li> <li> <a href= "http://www.111cn.net" > Project </a> <div class= "box" > <a href= "Http://www.111cn.net" > star hotel </a> <a href= "Http://www.111cn.net" > Government project </a> <a href= "http://www.111cn.net" > Bulletin House </a> <a href= "http://www.111cn.net" > Public rent Reduction </a> <a href= "Http://www.111cn.net" > Other </a> </div> </li> <li><a href= "http://www.111cn.net" > Service Support </a></li> <li><a href= "Http://www.111cn.net" > Contact Us </a></li> </ul> </div>