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>