abstract:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>导航与下拉菜单</title><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></s
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航与下拉菜单</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <style> *{margin: 0px;padding: 0px;} ul{list-style: none;} .menu{width: 80%;height: 40px;border: 1px;background: #2F3E45;margin: 50px 50px;} ul li{width: 100px;height: 35px;line-height: 40px;text-align: center;float: left;border-right: 1px solid #2F3E45;color: white;background: #2F3E45;cursor: pointer;} .sub1{width: 100px;height: 35px;line-height: 35px;background:#2F3E45;position: relative;border: 0px;} .sub1 li:hover{background: red;} .sub3 li{width: 100px;height: 35px;line-height: 35px;border: 0px;} .sub3{position: absolute;top: 0px;left: 100px;} </style> <script> $(document).ready(function(){ //隐藏二级与三级菜单 $('.sub1').hide() $('.sub3').hide() //.sub之下的li标签hover 显示二级与三级菜单 $('.one>li').mouseover(function(){ //找到所有类sub2 显示出来 时间500ms $(this).find('.sub2').slideDown(500) }) //鼠标移出隐藏二级 $('.one>li').mouseleave(function(){ $(this).find('.sub2').slideUp(500) }) //鼠标hover二级菜单显示三级菜单 $('.two').mouseleave(function(){ //在当前类下.sub2找到.sub3然后执行下滑显示三级菜单 $(this).find('.sub3').slideDown(500) }) //鼠标移出二级菜单隐藏三级 $('.two').mouseleave(function(){ $(this).find('.sub3').slideUp(600) }) }) </script> </head> <body> <div> <ul> <li>首页</li> <li>电气电子 <ul><!-- 电气电子二级菜单 --> <li>环球电气</li> <li>工业继电器 <ul><!-- 三级菜单 --> <li>固态继电器</li> <li>时间继电器</li> <li>控制继电器</li> </ul> </li> <li>直流固态继电器</li> </ul> </li> <li>工业开关 <ul> <!-- 工业开关二级菜单 --> <li>微动开关</li> <li>行程开关</li> </ul> </li> <li>自动控制</li> </ul> </div> </body> </html>
Correcting teacher:查无此人Correction time:2019-01-11 16:03:38
Teacher's summary:做的不错,之后的作业可以加上你写代码的思路,这样老师可以给你更好的建议,继续加油。