码迷,mamicode.com
首页 > Web开发 > 详细

html+css实现简易下拉菜单

时间:2016-11-25 17:37:42      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:htm   class   style   简易   flow   isp   ext   function   idt   

<!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实现简易下拉菜单

标签:htm   class   style   简易   flow   isp   ext   function   idt   

原文地址:http://www.cnblogs.com/njust-ycc/p/6101958.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!