本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
说我们IIS7站长博客，有一篇博文用了他们的图片。
要求我们给他们一张图片6000元。要不然法院告我们

为避免不必要的麻烦，IIS7站长博客，全站内容图片下架、并积极应诉
博文内容全部不再显示，请需要相关资讯的站长朋友到必应搜索。谢谢！

另祝：版权碰瓷诈骗团伙，早日弃暗投明。

相关新闻：借版权之名、行诈骗之实，周某因犯诈骗罪被判处有期徒刑十一年六个月

叹！百花齐放的时代,渐行渐远!

---

     今日在做下拉菜单时思考实现下拉菜单的几种实现方式，现在对这几种实现方式进行总结。

     1、改变下拉菜单的display

     嵌套在父元素li中的ul下拉菜单在调整好样式之后设置display：none；表示盒子框的样式为不显示。在伪类样式中添加display:block，表示当鼠标移动到此li上时，下拉菜单以block的形式进行显示。这就达到了下拉菜单的显示效果。

     2、改变透明度opacity

     分析：

     和改变display相类似，首先设计好样式之后为元素添加透明度为0，设置透明状态，在伪类中添加透明度opacity：1；即可将显示出下拉菜单。

     3、使用绝对定位

     同样实现效果。

     分析：

     首先给下拉菜单的父元素li设置一个relative的position，将下拉菜单整体进行绝对定位，left为负值将下拉菜单偏出html结构显现不出来，之后在hover伪类中将left设置为auto，鼠标移动到li时会使下拉菜单与同级元素进行自动定位达到左端对齐的效果。（left：0也可以。）

     4、下拉菜单height设置为0

     简单的画了一个图来解释一下：在上边的代码中li的高度为50px，而标题中的内容的行高line-height也设置为50px。父元素的高度已经固定，并且被标题内容“新闻中心”填满。所以此时下拉菜单的显示原理为溢出父容器li。首先将下拉菜单的高度height设置为0px；并且增加overflow：hidden；此时下拉菜单被隐藏起来。在hover伪类中添加height：auto或者是固定高度；即可将下拉菜单在鼠标移动过去时显示出来。

     注意：有几个重点

     1、要明白当父容器的height为显式高度时此时下拉菜单的显示原理为溢出父容器；

     2、因为下拉菜单的height要设置为0px，所以一定要加上overflow：hidden；

     3、在伪类中使用height：auto和height：显式高度，在添加过渡效果的时候会产生不一样的渲染效果。

     拓展思考

     如果将父元素li的高度设置为auto。会有什么不同。

     分析：

     在博客《width和height的100%和auto的区别以及height：100%无效的场景》中分析得到，只要包含块的高度没有显式指定，那么height:100%会当成auto解释；所以无论你子元素怎么去增加，父元素都会包裹住你的高度，不会溢出，此时下拉菜单的实现原理是：撑开父容器li，只是改变了一个属性就造成实现原理的不同！

     原文链接：https://blog.csdn.net/sun_DongLiang/article/details/81436106