下拉动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0px;
padding:0px;
font-family:"华文楷体";
font-size:30px;
}
#nav-top{ width:100%;
height:40px;
background-color:#1abc9c;
border-radius:5px;
color:#FFF;
}
.nav-btn{ width:300px;
float:left;
line-height:40px;
text-align:center;
border-radius:5px;/*边框为圆形*/
overflow:hidden;
max-height:40px;/*最大高度*/
}
li{ color: black;
list-style: none;
background-color: #ecf0ff;}
.nav-btn:hover{ max-height:400px;
transition:1s;/*过度效果*/
cursor:pointer;/* 鼠标变小手*/
background-color:cornflowerblue;
}
li:hover{ background-color: #1ABC9C;
}
</style>
</head>
<body>
<div id="nav-top">
<div class="nav-btn">第一栏
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</div>
<div class="nav-btn">第二栏
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="nav-btn">第三栏
<ul>
<li>i</li>
<li>ii</li>
<li>iii</li>
<li>vi</li>
<li>v</li>
</ul>
</div>
<div class="nav-btn">第四栏
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
</div>
</body>
</html>
