<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>导航代码position：relative</title>

<style type="text/css">

.a1{ width:120px; height:40px; background-color:#F00; position:relative; cursor:pointer; overflow:hidden;}

.a1:hover{ overflow:visible}

.a2{ width:120px; height:40px; background-color:#00F; position:relative; cursor:pointer; top:40px; overflow:hidden;}

.a2:hover{ overflow:visible }

.a3{ width:120px; height:40px; background-color:#0F0; margin-left:120px; cursor:pointer;}

.a4{ width:120px; height:40px; background-color:#FF0; position:relative; cursor:pointer; top:40px; overflow:hidden;}

.a4:hover{ overflow:visible }

.a5{ width:120px; height:40px; background-color:#F90; margin-left:120px; cursor:pointer;}

.a6{ width:120px; height:40px; background-color:#63F; position:relative; cursor:pointer; top:40px; overflow:hidden;}

.a6:hover{ overflow:visible}

.a7{ width:120px; height:40px; background-color:#999; margin-left:120px; cursor:pointer;}

</style>

</head>

<body>

<div class="a1">

<div class="a2"><div class="a3"></div>

</div>

<div class="a4"><div class="a5"></div>

</div>

<div class="a6"><div class="a7"></div>

</div>

</div>

</body>

</html>

导航代码position：relative的更多相关文章

  1. css - position relative与display table-cell深入分析

    在很多时候,想使用 display: table; 以及其子元素使用 display: table-cell 都只是为了使用 vertical-align 这一属性.这是一个很简单的常识,但这次在项目 ...

  2. "position:relative"在IE中的Bug

    当子元素过高导致父元素出现滚动条时,它并不会像预期的那样呆在父元素里,而是浮在父元素之上,并且位置不随滚动条的移动而改变.根源就是子元素的"position:relative".目 ...

  3. 层模型--相对定位(position:relative)

    如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left.right.top.bottom属性确定元素在正常文档流中的偏移位置.相对定位完成的过程 ...

  4. [置顶] css 背景透明，文字不透明，alpha滤镜，opacity，position:relative;

    都知道,在alpha滤镜下,背景透明了,里面的文字也会跟随透明,我们可以设置内容的position为relative可以解决这个问题 但是在position为absolute这么做却没有效果,怎么解决 ...

  5. 简明的例子讲解position:relative、float、overflow:hidden和inline-block

    标签(空格分隔): css relative float 我们通过一个简单的实验来了解position:relative float overflow:hidden 和 inline-block. 下 ...

  6. js左侧三级菜单导航代码

    效果演示: 实例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  7. 浅谈position: absolute和position:relative

    一.在此先说一下文档流的概念: 1,文档流定义: 百度百科定义:文档流是文档中可显示对象在排列时所占用的位置. 大多网友的理解:元素的位置由元素在 (X)HTML 中的位置决定.将窗体自上而下分成一行 ...

  8. CSS中margin和position:relative的定位问题

    一.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  9. jQuery防京东浮动网站楼层导航代码

    jQuery防京东浮动网站楼层导航代码   <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml" ...

随机推荐

  1. KDE、GNOME 和 XFCE 桌面比较

    KDE.GNOME 和 XFCE 桌面比较   这么多年来,很多人一直都在他们的 linux 桌面端使用 KDE 或者 GNOME 桌面环境.在这两个桌面环境多年不断发展的同时,其它的桌面也在持续增加 ...

  2. java的concurrent用法详解

    我们都知道,在JDK1.5之前,Java中要进行业务并发时,通常需要有程序员独立完成代码实现,当然也有一些开源的框架提供了这些功能,但是这些依然没有JDK自带的功能使用起来方便.而当针对高质量Java ...

  3. 51nod 1163 最高的奖励(贪心+优先队列)

    题目链接:51nod 1163 最高的奖励 看着这题我立马就想到昨天也做了一道贪心加优先队列的题了奥. 按任务最晚结束时间从小到大排序,依次选择任务,如果该任务最晚结束时间比当前时间点晚,则将该任务的 ...

  4. 2014-07-29 Asp.Net 中级工程师 笔试题

    一.选择题    1.下列描述错误的是() A  类不可以被多重继承而接口可以: B  抽象类自身可以定义成员而接口不可以: C  抽象类和接口都不能被实例化: D   一个类可以继承多个基类和多个基 ...

  5. PDF 补丁丁 0.4.2.905 测试版发布：智能合并功能减小合并文件的大小

    之前的测试版在合并文件功能处添加两个相同的PDF文件,程序会重复写入该文件的内容,导致文件体积膨胀,浪费存储空间. 例如:使用者需要在原 PDF 文件(设文件为1.pdf)第2和第3页中间插入几张图片 ...

  6. JS如何判断包括IE11在内的IE浏览器 <转载>

    今天碰到一个奇怪的问题,有一个页面,想指定用IE浏览器打开,在VS开发环境没有问题,但部署到服务器上,即使是用IE打开页面,还是提示“仅支持IE”,真是晕啊!! 判断是否IE浏览器用的是window. ...

  7. Unix Shell 程序设计 —— 正则表达式

    参考:http://www.cnblogs.com/erichhuang/archive/2012/03/13/2394119.html 简介: 简单的说,正则表达式是一种可以用于模式匹配和替换的强有 ...

  8. spring boot注解 --@EnableAsync 异步调用

    EnableAsync注解的意思是可以异步执行,就是开启多线程的意思.可以标注在方法.类上. @Component public class Task { @Async public void doT ...

  9. python语法------时间函数

    1.导入函数库: import time 获取格式化的时间 你可以根据需求选取各种格式,但是最简单的获取可读的时间模式的函数是asctime(): #!/usr/bin/python # -*- co ...

  10. 微信、QQ浏览器X5内核问题汇总

    一. 资料汇总 1.前端H5调起QQ浏览器的总结:http://km.oa.com/group/22486/articles/show/210189?kmref=search 2.Android We ...