首页 > 代码库 > html+css实现简易下拉菜单

html+css实现简易下拉菜单

2024-08-23 05:19:44   220人阅读

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
   width:100px;
   height:40px;
   overflow:hidden;

   background:yellow;
   transition:height 0.5s;
   -moz-transition:height 0.5s; /* Firefox 4 */
   -webkit-transition:height 0.5s; /* Safari and Chrome */
   -webkit-transition-timing-function:ease-in-out; /* 慢->快->慢 */
   -o-transition:height 0.5s; /* Opera */
}

div:hover
{
  height:200px; /*变换后高度*/
}

div a{
   display:block;
   height:40px;
   width:100px;
   text-align:center;
   line-height:34px;  
   background-color:#7d3;
   font-size:20px;
}

a:hover{
   background-color:#397;
}
</style>
</head>


<body>

<div>
       <a href="#">link1</a>
       <a href="#">link2</a>
       <a href="#">link3</a>
       <a href="#">link4</a>
       <a href="#">link5</a>
       <a href="#">link6</a>
</div>

</body>
</html>

 技术分享

 

html+css实现简易下拉菜单


联系
我们