<!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. SpringMVC集成缓存框架Ehcache

    在互联网应用中,应用并发比传统企业及应用会高出很多.解决并发的根本在于系统的响应时间与单位时间的吞吐量.思路可分为:一减少系统的不必要开支(如缓存),二是提高系统单位时间内的运算效率(如集群). 在硬 ...

  2. easyui 下拉树改造

    <select id="cc" style="width: 250px"></select> <div id="sp&q ...

  3. 初步涉及JDBC

    一.为什么要使用JDBC: 1.在之前的学习中,我们都是通过控制台来输入信息,创建对象,然后再输出信息,但是这样无法保存数据,每次程序运行都需要重新输入,很麻烦. 2. 在这样的情况下,我们就需要利用 ...

  4. Android学习---ListView的点击事件,simpleAdapter和arrayadapter,SimpleCursoAdapter的原理和使用

    如题,本文将介绍 listview的点击事件,simpleAdapter和arrayadapter的原理和使用. 1.ListView的注册点击事件 //注册点击事件 personListView.s ...

  5. wcf 由 http 更改为 https 返回404，没有终结点在侦听可以接受消息的

    首先wcf项目在使用http时是没问题的. WCF有http更改为https之后,返回 没有终结点在侦听可以接受消息 需要修改wcf服务端及客户端 服务端更改代码 <binding maxRec ...

  6. 分享一个快速测试ios软件的工具

    简易IPA安装地址生成器 地址: https://www.neicexia.com/IPADistribute/Resources/index.html?fromsite#IPADistribute- ...

  7. 开源安卓Http文件下载框架file-downloader的使用

    file-downloader FileDownloader(https://github.com/wlfcolin/file-downloader)是本人开源的一个安卓Http文件下载框架,是根据自 ...

  8. javascript学习第五课this、call、apply

    js函数与其它 高级语言相比有一个特点.没有返回值,一个简单函数就是function关键字+函数名字构成 this 对象是在运行中基于函数的执行环境绑定的,在全局函数中,this等于window,而当 ...

  9. 解决jquery1.9不支持browser对象的问题||TypeError: $.browser is undefined

    在插件的源代码里插入如下代码: (function(jQuery){ if(jQuery.browser) return; jQuery.browser = {}; jQuery.browser.mo ...

  10. Trie树的创建、插入、查询的实现

    原文:http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=28977986&id=3807947 1.什么是Trie树 Tr ...