<!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. [题解]vijos 运输计划

    Description 公元 2044 年,人类进入了宇宙纪元.L 国有 n 个星球,还有 n−1 条双向航道,每条航道建立在两个星球之间,这 n−1 条航道连通了 L 国的所有星球.小 P 掌管一家 ...

  2. 《Reactive_MircService_Architecture》 脑图

    Reactive_MircService_Architecture Lightbend CTO的50页的小册子,对响应式系统以及微服务架构介绍非常全面,整理了一个脑图来先.

  3. nginx+tomcat负载均衡

    最近练习nginx+tomcat负载均衡.根据一些资料整理了大体思路,最终实现了1个nginx+2个tomcat负载均衡. 安装JDK 1>进入安装目录,给所有用户添加可执行的权限 #chmod ...

  4. PHP中phar包的使用

    PHP5.3之后支持了类似Java的jar包,名为phar.用来将多个PHP文件打包为一个文件. 首先需要修改php.ini配置将phar的readonly关闭,默认是不能写phar包的,includ ...

  5. 转载：分布式系统的CAP理论

    原文转载Hollis原创文章:http://www.hollischuang.com/archives/666 2000年7月,加州大学伯克利分校的Eric Brewer教授在ACM PODC会议上提 ...

  6. 查看应用程序使用的所有dll

    VS2008命令提示符下: >dumpbin.exe   /dependents  <文件路径+文件名> □

  7. JSP知识

    五.JSP概述及最佳实践1.更改MyEclipse生成的JSP模板.模板文件与Servlet.java(Servlet模板文件)很近.2.学好JSP的关键:JSP就是Servlet.一定要记住JSP中 ...

  8. 爱上WPF,努力才会有希望！

    从WinForm转向WPF开发已经有两个多月了,通过不断深入地学习与运用,现在是越来越爱它了.它实在是太强大了.运用WPF,你不仅可以做Win界面,也可以很快转向Web开发,因为Silverlight ...

  9. 11.APP打包成ipa文件，然后利用Application Loader 上架

    第一步:保证已经完成了证书,Bundle Identifier 和描述文件的配置(未完成参考http://www.jianshu.com/p/391f6102b4fb) 第二步:打开要上传的项目,选择 ...

  10. Linux的phpstudy mysql登录

    使用绝对路径登录 /phpStudy/mysql/bin/mysql -uroot -p; 设置远程登录密码 GRANT ALL PRIVILEGES ON *.* TO 'itoffice'@'%' ...