<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .menu_level1{ width:500px; height:auto; margin:50px auto; } .menu_level1>li{ position: relative; float: left; list-style-type: none; height:30px; } .menu_level1>li>a{ padding:10px 15px; font-size:16px; } .menu_level2{ position:absolute; top:30px; left:0; padding:20px; height:100px; background-color:#fff; border:1px solid #ccc; border-radius:5px; box-shadow: 2px 2px 2px #eee; display: none; } .menu_level1>li:hover{ background-color:pink; } </style> </head> <body> <ul class="menu_level1"> <li><a>哈哈</a></li> <li><a>嘿嘿</a></li> <li><a>呼呼</a></li> <li><a>点我</a> <div class="menu_level2">哈罗，我是一块板砖，哪里需要哪里搬。。。。。</div> </li> </ul> </body> <script src="jquery-3.2.1.min.js"></script> <script> $(".menu_level1 li").click(function(){ $(".menu_level2").show(); }); $(document).click(function(e){ var target = $(e.target); if(target.closest(".menu_level1").length != 0) return; $(".menu_level2").hide(); }); </script> </html>
以上代码是用jQuery实现的，用angular的方法还没实现