<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{margin:0;padding:0} ul li{list-style:none} .fl{float:left} .top_l{height:22px;width:530px;border:1px solid red;position:relative} .top_l li{float:left;margin-right:20px} .top_l>ul>li>a{display:block;width:80px;height:22px} .top_l>ul>li>a:hover{color:red} .dq{width:293px;height:312px;border:1px solid #eee;overflow:auto;background-color:blue; display:none;position:absolute} </style> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> $(document).ready(function(){ var $top_l=$(".top_l>ul>li"); $top_l.mouseenter(function(){ $(this).children("div").show(); }) $top_l.mouseout(function(){ $(this).children("div").hide(); }) }) </script> </head> <body> <div class="top_l fl"> <ul > <li > <a href="javascript" class="comdown" style="color:#2F2F2F">中国大陆</a> <div class="dq"> <ul> <li>全球</li> <li>中国大陆</li> <li>香港</li> <li>台湾</li> <li>澳门</li> <li>韩国</li> <li>马来西亚</li> <li>澳大利亚</li> <li>新加坡</li> <li>新西兰</li> </ul> </div> </li> <li><a href="#" class="on">亲,请登录</a></li> <li><a href="#" >免费注册</a></li> <li><a href="#">手机逛淘宝</a></li> </ul> </div> </body> </html>
相关分类