<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. "SQLServer无法打开用户默认数据库,登录失败，错误4064"的解决办法

    "SQLServer无法打开用户默认数据库,登录失败,错误4064"的解决办法 1.检查登录密码 如果密码错误,修改数据库密码,用windows身份验证登录进去, (1)安全--登 ...

  2. 《BI那点儿事》数据流转换——多播、Union All、合并、合并联接

    建立测试数据: CREATE TABLE FactResults ( Name ) , Course ) , Score INT ) INSERT INTO FactResults ( Name , ...

  3. mac 显示set a breakpoint in malloc_error_break to debug 终端显示进程已完成怎么办？

    mac 终端显示 ,0x7fff73dbd300) malloc: *** error for object 0x7fce52d15100: pointer being freed was not a ...

  4. 关于 RxJava 技术介绍

    Awesome-RxJava RxJava resources Blog 给 Android 开发者的 RxJava 详解 -强烈推荐 扔物线的文章 讲解非常详细 NotRxJava懒人专用指南 -这 ...

  5. STM32学习笔记(四) RCC外设的学习和理解

    RCC时钟模块并不好理解,初次接触我也是一头雾水,而且我真正掌握它的时候也比较晚,是我在学习uC/os-II,需要分析时钟时才有了深刻认识.但在学习中我却一定要把放在了前列,因为这是整个嵌入式最重要的 ...

  6. 在腾讯云上创建您的SQL Cluster(4)

    版权声明:本文由李斯达原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/255 来源:腾云阁 https://www.qclo ...

  7. selenium eclipse环境搭建

    1.python 3.5下载及安装 2.setuptools 与pip 下载地址是:http://pypi.Python.org/pypi/setuptools http://pypi.Python. ...

  8. xcodebuild

    xcodebuild -workspace /path/union/moon-ios/Moon.xcworkspace -scheme Moon ONLY_ACTIVE_ARCH=NO TARGETE ...

  9. git中通过实际操作来了解常用命令

    基本的6个命令 常用的就下面6个命令,但是详细的可能有上百个命令. 还需要特别了解git的几个名词,workspace:工作区,Index/Stage:暂存区,Respository:本地仓库,Rem ...

  10. UDK:AdventureKit 攀爬系统

    [目标] AdventureKit攀爬系统 [思路] [步骤] 1 拷贝 2 设置config,UDKGame\Config\DefaultEngine.ini 添加包 [UnrealEd.Edito ...