<!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. git入门操作命令(转载)

    以下为git环境搭建: 先建用户-->建组-->用户添加到组   新建项目,命名空间选择组 项目建完后,会分配远端地址. 然后本地配置好远端地址后,提交代码.   设置用户,邮箱 git ...

  2. SQL Server创建复合索引时，复合索引列顺序对查询的性能影响

    说说复合索引 写索引的博客太多了,一直不想动手写,有一下两个原因:一是觉得有炒剩饭的嫌疑,有兄弟曾说:索引吗,只要在查询条件上建索引就行了,真的可以这么暴力吗?二来觉得,索引是个非常大的话题,很难概括 ...

  3. Coursera Machine Learning : Regression 简单回归

    简单回归 这里以房价预测作为例子来说明:这里有一批关于房屋销售记录的历史数据,知道房价和房子的大小.接下来就根据房子的大小来预测下房价. 简单线性回归,如下图所示,找到一条线,大体描述了历史数据的走势 ...

  4. svn的安装配置

    之前找了一些svn的资料,一直配置不成功.然后找到了这个链接,配置成功了.还可以. http://www.cnblogs.com/zhoulf/archive/2013/02/02/2889949.h ...

  5. 漫谈Linux内核哈希表(2)

    对照前面介绍过的内核通知链.链表,本章我们将要介绍的哈希表的初始化和定义也是如出一辙的: 点击(此处)折叠或打开 定义并初始化一个名为name的哈希链表表头 #define HLIST_HEAD(na ...

  6. workflow createPath

    针对不同的流程,createpath不同,但是创建审批链,和创建表都有 1.GetUserInfoByListColumn 控件已创建的.先Rebuild,属性需要注意 2.CreateListIte ...

  7. [转]Centos7下caffe的安装

    Centos7下caffe的安装 原文地址:http://blog.csdn.net/s2392735818/article/details/49796017   版权声明:本文为博主原创文章,未经博 ...

  8. 搭建dns域名服务器过程

    在用TCP/IP协议族架设的网络中,每一个节点都有一个唯一的IP地址,用来作为它们唯一的标志.然而,如果让使用者来记住这些毫无记忆规律的IP地址将是不可想象的.人们就需要一种有记忆规律的字符串来作为唯 ...

  9. 使用 KGDB 调试 Kernel On Red Hat Linux

    1. KGDB 简介         KGDB  提供了一种使用 GDB 调试 Linux 内核的机制.使用 KGDB 可以象调试普通的应用程序那样,在内核中进行设置断点.检查变量值.单步跟踪程序运行 ...

  10. ngnix 502 bad gateway 的解决办法之空间满了

    网站一直运行都很正常,但某天登录后台却出现502 bad gateway,上网搜索都是一大堆解决办法,没可操作性.网站难道出现安全问题?这个应该很少概率.最后排查发现空间满了. 使用命令:df -hl ...