<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>相关分类