abstract:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三级下拉菜单</title> <script type="text/javascript" src="jq
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三级下拉菜单</title> <script type="text/javascript" src="jquery/jquery-3.3.1.js"></script> <style type="text/css"> *{margin: 0px;padding: 0px;} .menu { width: 800px;height: 35px;margin: 0px auto;background: #000; margin-top: 20px;color: #fff; border:1px solid #ccc;border-radius: 5px; } ul{ list-style: none;} ul li {width: 100px;height: 35px;line-height: 35px;text-align: center;float: left;border-right: 1px solid #ccc;cursor: pointer;} .twobox li {width: 100px;height: 30px;line-height: 30px;background: #2D2D2D;color: #A9A9A9; font-size: 14px;position: relative;border:0px;} .twobox li:hover {background: #000;color: #fff;} .three {position: absolute; top: 0px;left: 100px;} .three li {width: 99px;height: 30px;line-height: 30px;border: 0;} </style> <script type="text/javascript"> $(document).ready(function(){ $('.twobox').hide() //隐藏二 三级菜单 $('.three').hide() $('.one>li').mouseover(function(){ $(this).find('.twobox').slideDown(500) //鼠标移动到二级菜单时显示(find查找包含twobox的class) }) $('.one>li').mouseleave(function(){ $(this).find('.twobox').slideUp(500) //鼠标移出二级菜单时隐藏 }) $('.two').mouseover(function(){ $(this).find('.three').slideDown(500) //鼠标移动到三级级菜单时显示 }) $('.two').mouseleave(function(){ $(this).find('.three').slideUp(500) //鼠标移出二级菜单时隐藏 }) }) </script> </head> <body> <div class="menu"> <ul class="one"> <li>首 页</li> <li>产 品 <ul class="twobox"> <li>产品1</li> <li class="two">产品2 <ul class="three"> <li>产品1.1</li> <li>产品1.2</li> <li>产品1.3</li> <li>产品1.4</li> </ul> </li> <li class="two">产品3 <ul class="three"> <li>产品3.1</li> <li>产品3.2</li> <li>产品3.3</li> <li>产品3.4</li> </ul> </li> <li>产品4</li> </ul> </li> <li>公司新闻 <ul class="twobox"> <li>公司新闻1</li> <li class="two">公司新闻2 <ul class="three"> <li>公司新闻1.1</li> <li>公司新闻1.2</li> <li>公司新闻1.3</li> </ul> </li> <li>公司新闻3</li> <li>公司新闻4</li> </ul> </li> <li>行业新闻</li> <li>联系我们</li> </ul> </div> </body> </html>
通过对自己所学知识的一个梳理,知道什么地方该用什么方法,也对这个语言又了一个初步的认识,继续加油,希望不会半途而废……
Correcting teacher:查无此人Correction time:2018-12-20 09:29:38
Teacher's summary:我也相信你不会半途而废,如果能把你梳理好的知识告诉我,那就好了。。