问：这是怎么原理实现的？
其实就是显示和隐藏
问：那么这个现实和隐藏如何实现呢？
其实方法有很多，下面我来带着大家看一下每种实现方式和其不同点
无论使用哪一种方式实现，首先这个东西必须先存在，我们先在结构中存在
一级导航
二级导航 二级导航 二级导航
这样的结构写法在我们的页面中一开始是所有的导航都是显示的
我们想要实现一开始只显示一级导航效果，当鼠标划上一级导航的时候显示二级导航效果
方法一：用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你是可以看到类似于卷帘门从上向下拉的效果。
哈哈是不是学到了，好了不说了，老铁们自己看着办法，反正我把方式方法都告诉大家了，是收藏还是点赞。
<script type="text/javascript" src="js/jq.js"></script><!--这里要引入jQuery库--><script type="text/javascript">
$(function(){
$(".icon").click(function(){
if($(this).html()=="+"){
$(this).html("-")
}
else{
$(this).html("+")
}
$(".content p").toggle(100)
})
})
</script>
<style type="text/css">
*{margin:0padding:0font:12px/16px 宋体}
.divcon{width:300pxdisplay:inline-tablepadding:10pxborder:1px solid #CCC}
.divcon div{float:left}
.icon{width:20pxheight:20pxborder:1px solid #666text-align:centerline-height:20pxcursor:pointer}
.content{width:270pxpadding-left:5px}
.content p{color:#999display:none}
</style>
<div class="divcon">
<div class="icon">+</div>
<div class="content">
这里是文字哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦……
<p>隐藏的文字隐藏的文字隐藏的文字隐藏的文字隐藏的文字隐藏的文字</p>
</div>
</div>
