【Foreword】
Student question: Occasionally there is a flickering problem when the secondary navigation slides over, and it looks unstable
【main body】
(1) Reason analysis: This situation is generally caused by the event binding the wrong element
(2) Distinguish the bound elements clearly. When implementing with jQuery, pay attention to binding li. Below I share a demo I just made, for reference and understanding
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Dropdown menu</title> <!--Referencing the jQuery library of Baidu server--> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style type="text/css"> /*CSS global settings*/ *{ margin:0; padding:0; } .are not{ background-color:#EEEEEE; height:40px; width:450px; margin:0 auto; } ul { list-style:none; } .nav>ul ul{ position: absolute; display: none; top: 50px; } ul li{ padding-bottom: 20px; float: left; line-height: 40px; text-align: center; } a{ text-decoration: none; color: #000000; display: block; width: 90px; height: 40px; } a:hover{ background-color:#666666; color:#FFFFFF; } ul li ul li{ padding-bottom: 0px; float:none; background-color:#EEEEEE; } ul li ul{ display:none; } /*In order to be compatible with CSS styles written by IE7, but must be written before a:hover*/ ul li ul li a:link,ul li ul li a:visited{ background-color:#EEEEEE; } ul li ul li a: hover { background-color:#009933; } </style> </head> <body> <div id="nav" class="nav"> <ul> <li><a href="#">网站首页</a></li> <li class="navmenu"><a href="#">课程大厅</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Ajax</a></li> </ul> </li> <li class="navmenu"><a href="#">学习中心</a> <ul> <li><a href="#">视频学习</a></li> <li><a href="#">案例学习</a></li> <li><a href="#">交流平台</a></li> </ul> </li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </div> <script> $(function(){ $(".navmenu").mouseover(function(){ $(this).children("ul").show(); }) $(".navmenu").mouseout(function(){ $(this).children("ul").hide(); }) }) </script> </body> </html>
.