<div>
<a href="#">一级导航</a>
<p>
<a href="#">二级导航</a>
<a href="#">二级导航</a>
<a href="#">二级导航</a>
</p>
</div>
这样的结构写法在我们的页面中一开始是所有的导航都是显示的
我们想要实现一开始只显示一级导航效果,当鼠标划上一级导航的时候显示二级导航效果
方法一:用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; 你是可以看到从无到有淡入淡出的效果的
方法三:用height:0; height:100px方式实现
一开始给p标签添加一个height:0; 但是由于里面有二级菜单的内容文字所以会存在溢出,添加一个overflow:hidden即可解决
当鼠标划上div时让p标签显示 div:hover p{height:100px;}
注意:此方式可以实现显示和隐藏的效果,支持过渡效果,在p标签的初始状态上加上一个transition:1s; 你是可以看到类似于卷帘门从上向下拉的效果。