谷歌页面的效果图：
仿造谷歌的效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>google布局</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.container {
position: relative;
width: 200px;
height: 40px;
}
.container .btn {
display: inline-block;
width: 120px;
height: 35px;
line-height: 35px;
text-align: center;
background-color: #029AE5;
color: white;
margin-left: 20px;
margin-top: 20px;
}
.content {
width: 400px;
height: 200px;
background-color: floralwhite;
overflow: scroll;
overflow-x: hidden;
position: absolute;
top: 65px;
display: none;
}
.footer {
width: 100%;
height: 700px;
background-color: bisque;
}
.content ul.ul {
clear: both;
}
.content ul li {
margin: 30px;
list-style: none;
float: left;
}
.content ul li img {
width: 48px;
height: 48px;
}
</style>
</head>
<body>
<div class="container">
<span class="btn">显示列表</span>
<div class="content">
<ul class="ul">
<li><a><img src="images/weixin.png" /></a></li>
<li><a><img src="images/weibo.png" /></a></li>
<li><a><img src="images/QQ.png" /></a></li>
<li><a><img src="images/person.png" /></a></li>
<li><a><img src="images/github.png" /></a></li>
<li><a><img src="images/foxfire.png" /></a></li>
<li><a><img src="images/chorm.png" /></a></li>
</ul>
</div>
</div>
<div class="footer">
</div>
<script src="js/jquery-2.1.0.js"></script>
<script type="text/javascript">
$('.container .btn').click(function(){
$('.container .content').css('display','block');
});
$(document).mouseup(function(e) {
var _con = $('.btn'); // 设置目标区域
if (!_con.is(e.target) && _con.has(e.target).length === 0) {
$('.container .content').css('display','none');
}
});
</script>
</body>
</html>
效果：
父元素相对定位，子元素绝对定位，这样绝对定位的元素大小超出父元素（父元素超出部分隐藏），并且显示在最上层，也会覆盖部分父元素后面的元素
