css如何实现下拉菜单?

css如何实现下拉菜单?本篇文章给大家分享几种实现下拉菜单的方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

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;
        }

1.png

实现结果如图所示;嵌套在父元素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;*/
        }

2.png

简单的画了一个图来解释一下:在上边的代码中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前端知识,请查阅 HTML中文网 !!

以上就是css如何实现下拉菜单?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏