纯CSS实现展开列表
效果预览
以下为源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
*{
padding:0;
margin:0
}
.menu>li{
float:left;
width:80px;
background:#0ff;
list-style:none;
text-align: center;
}
.menu>li:hover .hiddenlist{
height:100px;
}
.menu>li:hover{
background:#707;
}
.hiddenlist{
position:fixed;
height:0;
overflow:hidden;
background:#999;
transition:height 0.5s ;
}
.hiddenlist ul{
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:80px;
}
.hiddenlist ul li{
text-align:center;
}
.hiddenlist li:hover {
background:#7fff;
}
@keyframes move{
0% {height: 0 }
100% {height: 120px}
}
</style>
<body>
<div class="nav">
<ul class="menu">
<li>一
<div class="hiddenlist">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</li>
<li>二
<div class="hiddenlist">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</li>
<li>三
<div class="hiddenlist">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</li>
</ul>
</div>
<div style="clear:both;">因为hidden的position属性为fixed，所以不会影响布局</div>
</body>
</html>