问：这是怎么原理实现的？
其实就是显示和隐藏
问：那么这个现实和隐藏如何实现呢？
其实方法有很多，下面我来带着大家看一下每种实现方式和其不同点
无论使用哪一种方式实现，首先这个东西必须先存在，我们先在结构中存在
一级导航
二级导航 二级导航 二级导航
这样的结构写法在我们的页面中一开始是所有的导航都是显示的
我们想要实现一开始只显示一级导航效果，当鼠标划上一级导航的时候显示二级导航效果
方法一：用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你是可以看到类似于卷帘门从上向下拉的效果。
哈哈是不是学到了，好了不说了，老铁们自己看着办法，反正我把方式方法都告诉大家了，是收藏还是点赞。
display：none可以隐藏某个元素，且隐藏的元素不会占用任何空间。该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
display：block可以显示一个块元素，或者display：inline是显示一个内联元素。
display主要用的CSS样式有以下三个：
display:block——显示为块级元素。
display:inline——显示为内联元素。
display:inline-block——显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性。
扩展资料：
显示的块级元素(block)特性：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制
显示的内联元素(inline)特性：和相邻的内联元素在同一行宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小
块级元素主要有：address,blockquote,center,dir,div,dl,fieldset,form,h1,h2,h3,h4,h5,h6,hr,isindex,menu,noframes,noscript,ol,p,pre,table,ul,li等css属性。
内联元素主要有：a,abbr,acronym,b,bdo,big,br,cite,code,dfn,em,font,i,img,input,kbd,label,q,s,samp,select,small,span,strike,strong,sub,sup,textarea,tt,u,var等css属性。
