<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. XMLHttpRequest upload属性

    一.新版本的XMLHttpRequest对象,传送数据的时候,有一个progress事件,用来返回进度信息. 它分成上传和下载两种情况 1)下载的progress事件属于XMLHttpRequest对 ...

  2. [SoapUI] 同一个Resource不同参数时，在两个step里默认打开总是同一个Resource

    当SoapUI里Projects 有两个相同的Resource,只是参数不同时,使用两个Resource创建的step默认打开的总是同一个Resource.我们应当修改method名字为不同,这是So ...

  3. Spark排错与优化

    一. 运维 1. Master挂掉,standby重启也失效 Master默认使用512M内存,当集群中运行的任务特别多时,就会挂掉,原因是master会读取每个task的event log日志去生成 ...

  4. Java 类中各成分加载顺序 和 内存中的存放位置

    参加一个笔试,有一个关于类的静态代码块.构造代码块.构造函数的执行顺序的问题.不太清楚,网上百度了一下.在这里记录一下. 一.什么时候会加载类?使用到类中的内容时加载:有三种情况1.创建对象:new ...

  5. "struct"类型重定义解决办法

    #ifndef 在头文件中的作用 在一个大的软件工程里面,可能会有多个文件同时包含一个头文件,当这些文件编译链接成一个可执行文件时,就会出现大量 “重定义”的错误. 在头文件中使用#ifndef #d ...

  6. 初学者：JSP登陆界面

    学生登陆查询系统 1 程序的主要功能及特点 实现一个登录界面的基本功能,具体要求: 登录界面login.jsp含有表单,用户能够输入用户名和密码,并提交表单给verify.jsp. Verify.js ...

  7. 基于天天动听API开发在线音乐查询网站

    预览图 源码下载 地址:https://github.com/bajdcc/dev/tree/master/ttpod 文件夹说明: App_Code,WCF服务 Script,离线下载的celery ...

  8. Java：多线程<一>

    程序运行时,其实是CPU在执行程序的进程,为了提高工作效率一个进程可以有多个线程. Java的多线程: 其实我们之前就见过Java的线程,main就是Java的一个线程,还有另一个条线程总是和main ...

  9. 使用urllib编写python爬虫

    新版python中,urllib和urllib2合并了,统一为urllib (1)简单爬取网页 import urllib content = urllib.request.urlopen(req). ...

  10. Linux设备驱动中的并发控制

    1.并发是指多个执行单元同时.并行的执行.并发的执行单元对共享资源的访问很容易导致竞态. 在 Linux 内核中,主要的竞态发生于如下几种情况: ①对称多处理器(SMP)的多个 CPU ②单CPU内进 ...