<!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实现简易下拉菜单的更多相关文章

  1. 经典的 div + css 鼠标 hover 下拉菜单

    经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...

  2. CSS 实现样式下拉菜单

    下拉菜单的实现 脚本: <script type="text/javascript"> function ShowSub(li) { ]; ; subMenu.styl ...

  3. CSS写动态下拉菜单 -----2017-03-27

    动态网站第一步:动态下拉菜单 关键点: overflow:hidden max-height xx:hover {} 设置当鼠标移上之后的效果 transition:   设置过度时间 cursor: ...

  4. 纯css实现横向下拉菜单

    自己最近在捣腾css代码,不光是js能做很多有趣的东西,这货也可以做很多东西,现在把自己的一些作品分享给大家. 做得有点粗糙,大家根据这个思路来,可以自己修改修改. 关于demo:这是一个横向下拉的菜 ...

  5. JavaScript+CSS+DIV实现下拉菜单示例

    <!DOCTYPE html> <html> <head> <title>下拉菜单示例</title> <script languag ...

  6. CSS打造三级下拉菜单

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  7. css制作简单下拉菜单

    要点:定位,隐藏,显示. (一)先建一个两次列表 <ul id="ul1"> <li>首页</li> <li>第二页 <ul& ...

  8. js+css实现简单下拉菜单

    <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...

  9. 4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器

    CSS导航栏 熟练使用导航栏,对于任何网站都非常重要 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单 垂直导航栏: <!DOCTYPE html> <html> & ...

随机推荐

  1. Android Studio线下版和线上版都使用正式签名脚本（保证keysore签名文件和项目在同级目录），不用再因为繁琐的发正式版而烦恼

    场景:调用微信等第三方应用时如果生成的版本不是正式签名的可能会调用失败,使用如下脚本不用再为繁琐的发正式签名版而烦恼 app项目中的build.gradle追加如下代码: //使用正式签名脚本(保证k ...

  2. const变量初始化问题

    在C++中const变量定义时必须进行初始化,否则无法通过编译. 初始化的方式有多种,可以通过字面值对其进行初始化,也可以通过变量对其初始化,或其他方式,只要能给const变量赋初值即可(当然初值应该 ...

  3. 根据第三方库spire.pdf使用指定打印机打印pdf文件

    private void button1_Click(object sender, EventArgs e) { PdfDocument doc = new PdfDocument(); string ...

  4. ng-init,ng-controller,ng-model

    1.ng-init 用于初始化数据,跟在$scope插入数据一样,但是在配合repeat指令时候比较有用: <div ng-repeat="arrOuter in arr" ...

  5. linux不知道文件在哪,想查找文件内的字符串

    find . -name "*.*" |xargs grep "xxx"

  6. CSS3制作各种形状图像

    圆形-椭圆形-三角形-倒三角形=左三角形-右三角形-菱形-平行四边形- 星形-六角星形-五边形-六边形-八角形-心形-蛋形-无穷符号-消息提示框 不废话直接 html界面(亲测的) ------转自百 ...

  7. cocoapods specs 镜像

    在使用cocoapods 进行update 或者 install的时候 每次回去更新获取的pod specs,每次速度都不是很理想,博主最近对github上的specs仓库进行了镜像,分别在gitca ...

  8. adb devices 端口占用

    一. 1.通过cmd命令,输入adb devices查看连接设备时,报错 2 .通过adb nodaemon server  查看adb server绑定的端口.提示“通过每个套接字地址只能使用一次” ...

  9. seaJS 简单例子，理解seaJS

    学习心得: 记得第一次学underscore的时候,去的官网(不管什么都是官网好),呼啦一长列语法,我就一个个看,看完也不知道underscore是做什么的.就是现在underscore我也用不上,学 ...

  10. Caused by: java.lang.UnsatisfiedLinkError: Couldn't load BaiduMapVOS_v2_1_3: findLibrary returned nu

    我是在整合百度LBS服务与百度语音识别服务的时候遇到这个问题的........ 解决办法是:不要导armeabi-v7a这个文件夹即可. 貌似还有的人试一下以下这种方法(这种方法来自:http://w ...