CSS 如何实现下拉菜单? 本篇文章给大家分享几种实现下拉菜单的方式. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
方法 1: 使用 display 属性控制二级下拉菜单的显示与否
- /*html 结构, 以下四种方法通用 */
- <div id="container">
- <ul id="con_ul" class="cleanfix">
- <li > 首页 </li>
- <li > 关于我们 </li>
- <li>
新闻中心
- <ul id="drop">
- <li><a href=""> 最新动态 </a></li>
- <li><a href=""> 视频中心 </a></li>
- <li><a href=""> 媒体报道 </a></li>
- <li><a href=""> 热点专题 </a></li>
- <li><a href=""> 媒体资料库 </a></li>
- </ul>
- </li>
- <li > 苏宁产业 </li>
- <li > 社会责任 </li>
- <li > 联系我们 </li>
- </ul>
- </div>
- /*CSS 样式, 以下四种方法只是将改动部分进行展示 */
- #con_ul> li:hover{
- background-color: blue;
- }
- #drop{
- display: none;
- width: 120px;
- height:auto;
- }
- #drop> li{
- height: 30px;
- line-height: 30px;
- background-color: gray;
- list-style: none;
- text-align: left;
- padding-left: 20px;
- }
- #drop> li a{
- color: white;
- text-decoration: none;
- }
- #con_ul> li:nth-child(3):hover #drop{
- display: block;
- }
实现结果如图所示; 嵌套在父元素 li 中的 ul 下拉菜单在调整好样式之后设置 display:none; 表示盒子框的样式为不显示. 在伪类样式中添加 display:block, 表示当鼠标移动到此 li 上时, 下拉菜单以 block 的形式进行显示. 这就达到了下拉菜单的显示效果.
方法 2: 使用 opacity 控制二级下拉菜单的显示与否
- #drop{
- width: 120px;
- height:auto;
- opacity: 0;
- }
- #con_ul> li:nth-child(3):hover #drop{
- opacity: 1;
- }
分析: 和改变 display 相类似, 首先设计好样式之后为元素添加透明度为 0, 设置透明状态, 在伪类中添加透明度 opacity:1; 即可将显示出下拉菜单.
方法 3: 使用绝对定位
- /* 主要 CSS 代码 (其他部分和上边一样)*/
- #con_ul> li{
- float: left;
- height: 50px;
- width:100px;
- line-height: 50px;
- text-align: center;
- position: relative;
- }
- #drop{
- width: 120px;
- height:auto;
- position: absolute;
- left:-800px;
- }
- #con_ul> li:nth-child(3):hover #drop{
- left:auto;
- }
同样实现效果;
分析: 首先给下拉菜单的父元素 li 设置一个 relative 的 position, 将下拉菜单整体进行绝对定位, left 为负值将下拉菜单偏出 HTML 结构显现不出来, 之后在 hover 伪类中将 left 设置为 auto, 鼠标移动到 li 时会使下拉菜单与同级元素进行自动定位达到左端对齐的效果.(left:0 也可以.)
方法 4: 下拉菜单 height 设置为 0
- /* 部分主要代码 */
- #con_ul> li{
- float: left;
- height: 50px;
- width:100px;
- line-height: 50px;
- text-align: center;
- }
- #drop{
- width: 120px;
- height:0;
- overflow: hidden;
- }
- #con_ul> li:nth-child(3):hover #drop{
- height: 150px; /*height: auto;*/
- }
简单的画了一个图来解释一下: 在上边的代码中 li 的高度为 50px, 而标题中的内容的行高 line-height 也设置为 50px. 父元素的高度已经固定, 并且被标题内容 "新闻中心" 填满. 所以此时下拉菜单的显示原理为溢出父容器 li. 首先将下拉菜单的高度 height 设置为 0px; 并且增加 overflow:hidden; 此时下拉菜单被隐藏起来. 在 hover 伪类中添加 height:auto 或者是固定高度; 即可将下拉菜单在鼠标移动过去时显示出来.
注意: 有几个重点
1: 要明白当父容器的 height 为显式高度时此时下拉菜单的显示原理为溢出父容器;
2: 因为下拉菜单的 height 要设置为 0px, 所以一定要加上 overflow:hidden;
3: 在伪类中使用 height:auto 和 height: 显式高度, 在添加过渡效果的时候会产生不一样的渲染效果.
总结
1:display 属性和 opacity 属性相对简单;
2: 使用绝对定位要对直接父元素进行相对定位;
3: 下拉菜单父元素的高度是 auto 还是显式高度, 他两种的实现原理是截然不同的.
4: 注意总结方法, 注意不同的场景, 加油!
更多 web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17458.html