<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. IE6兼容性问题及IE6常见bug详细汇总

    转载地址:http://www.jb51.net/css/76894.html 1.IE6怪异解析之padding与border算入宽高 原因:未加文档声明造成非盒模型解析 解决方法:加入文档声明&l ...

  2. Cron表达式简单学习

    CronTriggers往往比SimpleTrigger更有用,如果您需要基于日历的概念,而非SimpleTrigger完全指定的时间间隔,复发的发射工作的时间表.CronTrigger,你可以指定触 ...

  3. 深入浅出设计模式——桥接模式（Bridge Pattern）

    模式动机设想如果要绘制矩形.圆形.椭圆.正方形,我们至少需要4个形状类,但是如果绘制的图形需要具有不同的颜色,如红色.绿色.蓝色等,此时至少有如下两种设计方案: 第一种设计方案是为每一种形状都提供一套 ...

  4. Js获取下拉框选定项的值和文本

    Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...

  5. C语言复杂声明

    C语言复杂声明 First step int *f(); /* f:是一个函数,它返回一个指向int类型的指针*/ int (*pf)(); /* pf:是一个指向函数的指针,该函数返回一个int类型 ...

  6. features block

    很轻松就能把一个新建的block导出到一个module包里.

  7. fis3运行项目的前准备

    前几天搭建了fis3环境,但是不会运行项目.因为刚来公司前辈把项目打包给我,但是我之前没有做过这种项目. 今天前辈来了,教我几个命令行运行项目.但是没有成功..... 原因我的sass是单独安装的,没 ...

  8. 转---- javascript prototype介绍的文章

    JavaScript是基于对象的,任何元素都可以看成对象.然而,类型和对象是不同的.本文中,我们除了讨论类型和对象的一些特点之外,更重要的是研究如何写出好的并且利于重用的类型.毕竟,JavaScrip ...

  9. SSM框架学习之高并发秒杀业务--笔记3-- Service层

    上一节中已经包DAO层编写完成了,所谓的DAO层就是所有和数据访问的部分都应该放在这个层里,它负责与数据库打交道.对于一个web项目来说,大概由这几部分组成: 1. 前台的显示层. 2. 分发处理请求 ...

  10. IT公司100题-tencent-打印所有高度为2的路径

    问题描述: 打印所有到叶子节点长度为2的路径  10  /  \ 6   16 / \   / \ 4 8  14 18   / \    / \    \ 2  5  12 15 20 / 11   ...