<!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的post()方法究竟运行在哪个线程中

    Android中我们常用的post()方法大致有两种情况: 1.如果post方法是handler的,则Runnable执行在handler依附线程中,可能是主线程,也可能是其他线程 2.如果post方 ...

  2. generator class 的含义

    native有天生的,本土的,也就是说生来就有的, 那也就是说自动生成,不需要人工来帮忙或者管控的. 而assigned是指指定的,分配的, 如果你不赋予他甚麼东西,那麼他是不能实现的. 需要人工,自 ...

  3. 简易购物车 --day2

    代码段 f =float(input('输入你的工资')) goods=['1.apple','2.mac','3.ph','4.python','5.php'] price=[35,26.5,14, ...

  4. [转]java.lang.OutOfMemoryError：GC overhead limit exceeded

    我遇到这样的问题,本地部署时抛出异常java.lang.OutOfMemoryError:GC overhead limit exceeded导致服务起不来,查看日志发现加载了太多资源到内存,本地的性 ...

  5. 2-2. Initializing Objects with Initializer Lists

    Using Uniform Initialization to Construct a vector #include <iostream> #include <vector> ...

  6. Linux内核完全注释阅读笔记1：O(1)时间复杂度查找timeout定时器

    前言 一直有Linux kernel情节,之前也一直在看Linux kernel相关的书和代码,但是每次到最后又由于兴趣转变而荒废了.这次终于静下心来想把Linux内核相关的代码好好看看,算是对自己的 ...

  7. ASCII、Unicode、GBK和UTF-8字符编码的区别联系

    转自http://dengo.org/archives/901 很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同的状态,以表示世界上的万物.他们看到8个开关状态是好的,于是他们把这称 ...

  8. Rancher 快速上手指南操作(1)

    Rancher 快速上手指南操作(1)该指南知道用户如何快速的部署Rancher Server 管理容器.前提是假设你的机器已经安装好docker了.1 确认 docker 的版本,下面是 ubunt ...

  9. Kiwi iOS驱动测试开发

    Kiwi是iOS开发一个行为驱动开发库.目标是提供一个BDD库,精美的简单安装和使用. 安装 使用CocoaPods安装: pod 'Kiwi'如果使用Xcode5则使用: pod 'Kiwi/XCT ...

  10. 基于ArcGIS Viewer for Flex开发的一款跨平台的应用程序

    特点: 1.基于ArcGIS Viewer for Flex开发的一款跨平台的应用程序: -(IBAction) showTOC:(id)sender { if (_tocViewController ...