html+css实现简易下拉菜单
<!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实现简易下拉菜单的更多相关文章
- 经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...
- CSS 实现样式下拉菜单
下拉菜单的实现 脚本: <script type="text/javascript"> function ShowSub(li) { ]; ; subMenu.styl ...
- CSS写动态下拉菜单 -----2017-03-27
动态网站第一步:动态下拉菜单 关键点: overflow:hidden max-height xx:hover {} 设置当鼠标移上之后的效果 transition: 设置过度时间 cursor: ...
- 纯css实现横向下拉菜单
自己最近在捣腾css代码,不光是js能做很多有趣的东西,这货也可以做很多东西,现在把自己的一些作品分享给大家. 做得有点粗糙,大家根据这个思路来,可以自己修改修改. 关于demo:这是一个横向下拉的菜 ...
- JavaScript+CSS+DIV实现下拉菜单示例
<!DOCTYPE html> <html> <head> <title>下拉菜单示例</title> <script languag ...
- CSS打造三级下拉菜单
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
- css制作简单下拉菜单
要点:定位,隐藏,显示. (一)先建一个两次列表 <ul id="ul1"> <li>首页</li> <li>第二页 <ul& ...
- js+css实现简单下拉菜单
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...
- 4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器
CSS导航栏 熟练使用导航栏,对于任何网站都非常重要 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单 垂直导航栏: <!DOCTYPE html> <html> & ...
随机推荐
- 根据UIColor对象,获取对应的RGBA值
- (NSArray *)getRGBWithColor:(UIColor *)color { CGFloat red = 0.0; CGFloat green = 0.0; CGFloat blue ...
- C# 动软生成器对应的Access数据库操作类DbHelperOleDb
using System;using System.Collections;using System.Collections.Specialized;using System.Data;using S ...
- ORACLE 日常处理办法
Oracle删除当前用户下所有的表的方法 1.如果有删除用户的权限,则可以: drop user user_name cascade; 加了cascade就可以把用户连带的数据全部删掉. 删除后再创建 ...
- 网站微信登录授权 ASP.NET
最新做一些项目都有微信登录注册什么的,今天就把自己整理的demo提供给大家 微信认证流程(我自己简称三次握手): 1.用户同意授权,获取code 2.通过code换取网页授权access_token, ...
- NC 单据保存时间过长,判断数据库锁表解决办法
SELECT s.sid, s.serial# FROM gv$locked_object l, dba_objects o, gv$session s WHERE l.object_id = o.o ...
- asp - Session
Session[]就是缓存,默认的类型是Object,就是说无论你把什么值赋给Session[],都是会变成Object类型的数据,空说没用,你也别看技术文献里面生涩的解释,我举个例子吧:比如说页面P ...
- C# Susan边缘检测(Susan Edge Detection)
Susan边缘检测,方法简单,效率高,具体参照 The SUSAN Edge Detector in Detail, 修改dThreshold值,可以改变检测效果,用参照提供的重心法.力矩法可得到边缘 ...
- 关于swfupload,客户端中文乱码解决方案!
公司做了个邮箱系统,上传附件用到了swfupload控件,测试成功上线后hr找我说上传附件中文乱码. 奇怪了,就只有她的电脑出问题,我找了好几台电脑,虚拟机也跑了怎么就找不到问题. 后来网上查了好久, ...
- jQuery基础_2
属性:attr: 属性 , 元素.attr("属性名");获取属性attr("attr","value"): 设置属性attr({value ...
- kettle(6.0)如何连接远程集群(CDH5.1)?
最近因为公司业务需要,刚刚接触了kettle.这不看不知道,一看才发现kettle的功能是在是太强大了,让我有种相见恨晚的感觉.由于主要是应用kettle与hadoop集群和hive连接进行数据处理. ...