css导行下拉动画
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>daohangtexiao</title>
<style>
*{
margin:0px;
padding:0px;
list-style:none; /*列表序列号设置为没有*/
font-family:"微软雅黑";
}
.top-container{
width:100%;
height:40px;
background-color:#6FF;
}
.top-dao{
width:500px;
height:40px;
margin:0px auto; /* 居中*/
}
.top-dao-1v1{
max-height:40px;
width:100px;
text-align:center; /*文字水平居中*/
line-height:40px; /*字体行高*/
overflow:hidden; /*隐藏DIV*/
float:left; /*流动而已左对齐*/
background-color:#FF9;
}
.top-dao-1v1 ul{
opacity:0.5; /*透明度设置*/
}
.top-dao-1v1 .top-dao{
border-radius:10px; /*边角设置为圆弧*/
}
.top-dao-1v1:hover{
max-height:400px;
cursor: pointer; /* 鼠标小手*/
transition:1s; /* 过渡效果设置*/
}
.top-dao-1v1 li:hover{
background: linear-gradient(to right, red , blue);/* 色彩过渡*/
}
</style>
</head>
<body>
<div class="top-container">
<div class="top-dao">
<div class="top-dao-1v1">坑
<ul>
<li>坑1</li>
<li>坑1</li>
<li>坑1</li>
<li>坑1</li>
<li>坑1</li>
</ul>
</div>
<div class="top-dao-1v1">深坑
<ul>
<li>坑1</li>
<li>坑1</li>
<li>坑1</li>
</ul>
</div>
<div class="top-dao-1v1">很坑
<ul>
<li>很坑1</li>
<li>很坑1</li>
<li>很坑1</li>
<li>很坑1</li>
</ul>
</div>
<div class="top-dao-1v1">坑点
<ul>
<li>坑点1</li>
</ul>
</div>
<div class="top-dao-1v1">就是坑
<ul>
<li>就是坑1</li>
<li>就是坑1</li>
</ul>
</div>
</div>
</div>
</body>
