按照老师的做的效果也实现了(不能上传引用文件)

原创 2018-11-01 19:16:31 192
摘要:<!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">首&nbsp页</li>
         <li class="li_f">产&nbsp品
                      <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>

新建位图图像.bmp

批改老师:PHP中文网批改时间:2018-11-01 19:33:44
老师总结:实现的不错,如果在提交的时候能把代码好好格式化一下就更好了

发布手记

热门词条