摘要:<!DOCTYPE html> <html> <head> <title>三级下拉菜单</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css&
<!DOCTYPE html> <html> <head> <title>三级下拉菜单</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="my.css"> <script type="text/javascript" src="jquery-3.3.1.js"></script> </head> <body> <div id="box"> <ul class="ul_main"> <li class="li_f">首 页</li> <li class="li_f">产 品 <ul class="towm"> <li class="li_s">产品1</li> <li class="li_s">产品2 <ul class="threem"> <li class="li_t">产品1</li> <li class="li_t">产品2</li> <li class="li_t">产品3</li> <li class="li_t">产品4</li> </ul> </li> <li class="li_s">产品3 <ul class="threem"> <li class="li_t">产品1</li> <li class="li_t">产品2</li> <li class="li_t">产品3</li> <li class="li_t">产品4</li> </ul> </li> <li class="li_s">产品4</li> </ul> </li> <li class="li_f">公司新闻 <ul class="towm"> <li class="li_s">公司新闻1</li> <li class="li_s">公司新闻2 <ul class="threem"> <li class="li_t">公司新闻1</li> <li class="li_t">公司新闻2</li> <li class="li_t">公司新闻3</li> <li class="li_t">公司新闻4</li> </ul> </li> <li class="li_s">公司新闻3</li> <li class="li_s">公司新闻4</li> </ul> </li> <li class="li_f">行业新闻</li> <li class="li_f">联系我们</li> </ul> </div> <script type="text/javascript"> $(function(){ $(".towm").hide(); $(".threem").hide(); $(".ul_main>li").mouseover(function(){ $(this).find(".towm").slideDown(); }) $(".ul_main>li").mouseleave(function(){ $(this).find(".towm").slideUp(); }) $(".towm>li").mouseover(function(){ $(this).find(".threem").slideDown(); }) $(".towm>li").mouseleave(function(){ $(this).find(".threem").slideUp(); }) }) </script> </body> </html>
批改老师:PHP中文网批改时间:2018-11-01 19:33:44
老师总结:实现的不错,如果在提交的时候能把代码好好格式化一下就更好了