<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. Navicat for mysql 破解

    想用navicat for mysql 连接mysql,发现只能试用30天,感觉挺不爽的,购买的话发现价格一千多,好贵的软件. 所以想要破解一下,网上试了一些方法不行,最后找到了一种方法可以的 破解工 ...

  2. RMAN的入门篇

    一.RMAN连接数据库 1.  连接本地数据库 [oracle@oracle hotbak]$ export oracle_sid=orcl [oracle@oracle hotbak]$ rman ...

  3. Design pattern---观察者模式

    观察者模式:发布/订阅模式,当某对象(被观察者)状态发生改变时所有订阅该对象的观察者对象(观察者)都将更新自己 成员(4种): 1.抽象被观察者:将所有的观察者对象的引用存入一个集合,并且定义了添加 ...

  4. $inArray()总是返回-1

    $inArray(val,arr)注意val类型和arr中的是否一致 如1 和"1" 就会返回-1

  5. 樱花漫地集于我心，蝶舞纷飞祈愿相随 発生：genesis 发生：genesis

    朱念齐,学号160809404(这些其实并没有什么乱用)唉(￣y▽￣)~* 正文 鬼族后裔,原是露格尼卡王国的子民,在王立比布利亚学园任职魔法使拥有分别为: 拥有书库: 书库:傲慢(Superbia) ...

  6. Node.js 快速了解

    最近在学习目前非常火的Node.js 写了一份精简易懂的笔记用于快速了解Node.js技术.如有不对的地方还请多多指教. 注:此篇博文不断更新中. 第一部分:快速了解 1.Node.js是什么? No ...

  7. apache开启.htaccess

    1 . 如何让的本地APACHE开启.htaccess 如何让的本地APACHE开启.htaccess呢?其实只要简朴修改一下apache的httpd.conf设置就让APACHE.htaccess了 ...

  8. 回车键转tab键解决方案二

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  9. Oracle 字符串分割排序冒泡算法

    例子: 一个字符串"11,15,13,17,12",以逗号分割,现在要排序成"11,12,13,15,17". 写了一个实现方法,记录下来以备后用: ----- ...

  10. Codeforces Round #379 (Div. 2) 解题报告

    题目地址 本次CF是在今天早上深夜进行,上午有课就没有直接参加.今天早上上课坐到后排参加了virtual participation.这次CF前面的题目都非常的水,不到10分钟就轻松过了前两题,比较郁 ...