问：这是怎么原理实现的？
其实就是显示和隐藏
问：那么这个现实和隐藏如何实现呢？
其实方法有很多，下面我来带着大家看一下每种实现方式和其不同点
无论使用哪一种方式实现，首先这个东西必须先存在，我们先在结构中存在
一级导航
二级导航 二级导航 二级导航
这样的结构写法在我们的页面中一开始是所有的导航都是显示的
我们想要实现一开始只显示一级导航效果，当鼠标划上一级导航的时候显示二级导航效果
方法一：用display:none和display：block方式实现
一开始给p标签一个display:none
当鼠标划上div时让p标签显示 div:hover p{display:block}
注意：此方式可以实现显示和隐藏的效果，但是不支持过渡效果，也就是你不能看到逐渐显示的过程
方法二：用opacity：0； opacity：1方式实现
一开始给p标签一个opacity:0
当鼠标划上div时让p标签显示 div:hover p{opacity:1}
注意：此方式可以实现显示和隐藏的效果，支持过渡效果，在p标签的初始状态上加上一个transition:1s你是可以看到从无到有淡入淡出的效果的
>need-to-insert-img
方法三：用height：0； height：100px方式实现
一开始给p标签添加一个height:0但是由于里面有二级菜单的内容文字所以会存在溢出，添加一个overflow：hidden即可解决
当鼠标划上div时让p标签显示 div:hover p{height:100px}
注意：此方式可以实现显示和隐藏的效果，支持过渡效果，在p标签的初始状态上加上一个transition:1s你是可以看到类似于卷帘门从上向下拉的效果。
哈哈是不是学到了，好了不说了，老铁们自己看着办法，反正我把方式方法都告诉大家了，是收藏还是点赞。
在一些网站的登录页面上，经常可以发现，一张图片叠加在另一张图片上，底层的图片若隐若现，利用css中的透明属性opacity可以实现这种效果，下面就简单介绍一下怎么写代码
01新建一个HTML文件，下载两张图片，如下图，放在一个文件夹中，避免出现路径问题
02代码示例如下，主要利用css伪元素::before，F_box为前置层，浮于背景上方
03下面简单分解下代码，分为1，2，3，第一部分，设置背景图片001.jpg；第三部分，固定前置层图片002.jpg的位置；第二部分，利用伪元素：：before，设置属性opacity来调节透明度，取值为0-1，0是全透明，即看不见的效果，1是全不透明
04代码示例中，设置opacity为0.5，半透明状态，实际页面效果如下
（1）1、js方法，这是一般网站常用的方法。优点：兼容性好，易管理。
实现方式：按钮
onclick
触发
目标div
显示/隐藏。
代码有很多。
2、纯css方法：这是为了应付考试，掌握灵活性而用
缺点：需要支持css3的浏览器，兼容性不佳。
实现方法：利用css的伪类选择，将整个一体放到一个div中，包括
触发按钮、标题、内容。在div的css上写高度、overflow:hidden，在hover或active伪类上写新的高度即可，并不太实用。特意为你写的示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#box { width:400pxheight:30pxborder:1px #666666 solidpadding:10pxoverflow:hidden}
#box h5{ border:1px #666666 solidheight:30pxmargin:0padding:0}
#box p{ border:1px #666666 solid}
#box:hover { height:100px}
</style>
</head>
<body>
<div id="box">
<h5>+ 标题</h5>
<p>这里是内容，也可以用 #box:active { height:100px}，这是鼠标按下的效果。</p>
</div>
</body>
</html>
（2）CSS是用级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
