<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

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

<title>无标题文档</title>

<style type="text/css">

*

{

   margin:0px;

   padding:0px;}

#aa

{

    height:40px;

    width:90px;

    top:80px;

    left:200px;

    background-color:#339;

    position:absolute;

    overflow:hidden;

    text-align:center;

    line-height:40px;

}

#bb

{

    height:120px;

    width:90px;

    top:40px;

    left:0px;

    background-color:#3FC;

    position:absolute;

}

table

{

    height:120px;

    width:90px;

    border:0px;

    text-align:center;

}

#cc

{

    height:40px;

    width:90px;

    position:absolute;

    left:0px;

    top:0px;

    overflow:hidden;

    background-color:#6F6;

}

#dd

{

    height:40px;

    width:90px;

    background-color:#666;

    position:absolute;

    left:90px;

    top:0px;

}

#ee

{

    height:40px;

    width:90px;

    position:absolute;

    left:0px;

    top:40px;

    overflow:hidden;

    background-color:#6F9;

}

#ff

{

    height:40px;

    width:90px;

    background-color:#666;

    position:absolute;

    left:90px;

    top:0px;

}

#gg

{

    height:40px;

    width:90px;

    position:absolute;

    left:0px;

    top:80px;

    overflow:hidden;

    background-color:#F99;

}

#hh

{

    height:40px;

    width:90px;

    background-color:#666;

    position:absolute;

    left:90px;

    top:0px;

}

</style>

</head>

<body>

<div id="aa" onmouseover="over()"  onmouseout="out()">新闻动态

<div id="bb">

<table cellpadding="0" cellspacing="0">

<tr>

<td height="40px" width="90px">

<div id="cc" onmouseover="over1()" onmouseout="out1()">场景

<div id="dd">讲座</div></div></td></tr>

<tr><td height="40px" width="90px"><div id="ee" onmouseover="over2()" onmouseout="out2()">活动<div id="ff">比赛</div></div></td></tr>

<tr><td height="40px" width="90px"><div id="gg" onmouseover="over3()" onmouseout="out3()">杂谈<div id="hh">项目</div></div></td></tr>

</table>

<script>

function over()

{

 var a = document.getElementById("aa");

 a.setAttribute("style","overflow:visible;background-color:yellow");}

function out()

{

var a = document.getElementById("aa");

 a.setAttribute("style","overflow:hidden");

}

function over1()

{

 var a = document.getElementById("cc");

 a.setAttribute("style","overflow:visible;background-color:green");}

function out1()

{

var a = document.getElementById("cc");

 a.setAttribute("style","overflow:hidden");

}

function over2()

{

 var a = document.getElementById("ee");

 a.setAttribute("style","overflow:visible;background-color:yellow");}

function out2()

{

var a = document.getElementById("ee");

 a.setAttribute("style","overflow:hidden");

}

function over3()

{

 var a = document.getElementById("gg");

 a.setAttribute("style","overflow:visible;background-color:red");}

function out3()

{

var a = document.getElementById("gg");

 a.setAttribute("style","overflow:hidden");

}

 </script>

</div></div>

</body>

</html>

显示效果：

鼠标没有指向时：

鼠标指向“新闻动态”时：

鼠标指向“场景”时：

鼠标指向“活动”时：

鼠标指向“杂谈”时：

HTML&CSS----练习隐藏导航栏（三级导航）的更多相关文章

  1. 纯洁CSS实现下拉菜单和下拉容器（纯洁CSS导航栏和导航下拉容器）

    虽然网上课程似即使案件大同小异,但我还是写,记笔记,也为您提供参考 我希望你能指导批评~~ 首先,我们必须列出ul li 开始我们的导航栏菜单也能说生产: 在下面的页面,我们先建XHTML结构体: & ...

  2. 微信小程序 自定义头部导航栏和导航栏背景图片 navigationStyle

    ​ 这两天因为要做一个带背景的小程序头,哭了,小程序导航栏有背景也就算了,还得让导航栏上的背景顺下来,心态小崩.现在可以单独设置一个页面的小程序头了,但是前提是要微信7.0以上的版本,考虑到兼容性问题 ...

  3. React实现顶部固定滑动式导航栏（导航条下拉一定像素时显示原导航栏样式）

    摘要 基于react的框架开发一个顶部固定滑动式的酷炫导航栏,当导航栏置顶时,导航栏沉浸在背景图片里:当鼠标滑动滚轮时,导航栏固定滑动并展示下拉样式. JS部分 相关技术栈:react.antd.re ...

  4. CSS 导航栏

    实例: 导航栏 Home News Articles Forum Contact About 导航栏 熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜 ...

  5. CSS 笔记——导航栏、下拉菜单、提示工具

    8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...

  6. CSS：CSS 导航栏

    ylbtech-CSS:CSS 导航栏 1.返回顶部 1. CSS 导航栏 导航栏 熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单. 导航栏=链接 ...

  7. HTML&CSS基础学习笔记1.11—导航栏

    上文我们介绍到的<a>标签,由于<a>标签可以用来跳转,所以我们可以拿<a>标签来生成网页的导航栏. 其实在实际运用中,<a>标签就经常会被用来生成导航 ...

  8. zhuang 定制iOS 7中的导航栏和状态栏

    近期,跟大多数开发者一样,我也正忙于对程序进行升级以适配iOS 7.最新的iOS 7外观上有大量的改动.从开发者的角度来看,导航栏和状态栏就发生了明显的变化.状态栏现在是半透明的了,这也就意味着导航栏 ...

  9. 【原创+译文】官方文档中声明的如何创建抽屉导航栏(Navigation Drawer)

    如需转载请注明出处:http://www.cnblogs.com/ghylzwsb/p/5831759.html 创建一个抽屉导航栏 抽屉式导航栏是显示在屏幕的左边缘,它是应用程序的主导航选项面板.它 ...

  10. iOS 7 教程：定制iOS 7中的导航栏和状态栏

    目录(?)[-] iOS 7中默认的导航栏 设置导航栏的背景颜色 在导航栏中使用背景图片 定制返回按钮的颜 修改导航栏标题的字体 修改导航栏标题为图片 添加多个按钮 修改状态栏的风格 隐藏状态栏 总结 ...

随机推荐

  1. 转MYSQL学习（四） 查询

    MySQL中select的基本语法形式: select 属性列表 from 表名和视图列表 [where 条件表达式] [group by 属性名[having 条件表达式]] [order by 属 ...

  2. php抽象类的简单应用

    抽象类也是面向对象中的重要概念,和接口.继承的概念重要性相当,在面向对象的开发中,所有的对象都是通过类来描述的,但是反过来,并不是所有类都是用来描绘对象的,广义上讲如果一个类中没有足够信息来描述一个具 ...

  3. Java for LeetCode 198 House Robber

    You are a professional robber planning to rob houses along a street. Each house has a certain amount ...

  4. Ubuntu及Windows ADB设备no permissions的解决方案

    不少人曾在Windows下及Ubuntu下都遇到过Android设备无法识别的情况,就是run as Android Application的时候,target显示"??????" ...

  5. block引发的陷阱

    block在项目的开发中使用时非常频繁的,苹果官方也极力推荐使用block.其实,究其本质,block就是指向结构体的指针(可利用运行时机制查看底层生成的c代码).然而在使用block时会存在很多陷阱 ...

  6. 【python】any()和all()

    any(iterable) 版本:该函数适用于2.5以上版本,兼容python3版本. 说明:如果iterable的任一元素不为0.''.False,返回True. all(iterable) 说明: ...

  7. 失恋28天-缝补礼物(codevs 2503)

    2503 失恋28天-缝补礼物  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description 话说上回他给女孩送 ...

  8. java中值类型和引用类型的区别

    [定义] 引用类型表示你操作的数据是同一个,也就是说当你传一个参数给另一个方法时,你在另一个方法中改变这个变量的值,那么调用这个方法是传入的变量的值也将改变. 值类型表示复制一个当前变量传给方法,当你 ...

  9. ThinkPHP中where()方法的使用

    where方法的用法是ThinkPHP查询语言的精髓,也是ThinkPHP ORM的重要组成部分和亮点所在,可以完成包括普通查询.表达式查询.快捷查询.区间查询.组合查询在内的查询操作.where方法 ...

  10. Android DrawerLayout 高仿QQ5.2双向侧滑菜单

    1.概述 之前写了一个Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭 ,恰逢QQ5.2又加了一个右侧菜单,刚好看了下DrawerLayout,一方面官方的东西,我都比较感兴趣:另一方面 ...