欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

html+css web前端开发实战——利用定位制作【下拉菜单】

程序员文章站 2022-03-07 11:45:49
刚开始自己搭的一个静态的页面,自己再尝试一下加上【下拉菜单】,会稍微完整一点效果如图:触碰到【博雅游戏】,即有下拉菜单【博雅游戏】是header部分中ul里的一个li...

刚开始自己搭的一个静态的页面,自己再尝试一下加上【下拉菜单】,会稍微完整一点

 

效果如图:html+css web前端开发实战——利用定位制作【下拉菜单】

触碰到【博雅游戏】,即有下拉菜单


【博雅游戏】是header部分中ul里的一个li

下拉菜单可以使用ul>li结构,在【博雅游戏】这个li里再插入一个ul>li结构

html部分即完成

<ul class="nav">
                <li class="current"><a href="#">首页</a></li>
                <li class="byyx"><a href="#">博雅游戏</a>
                    <ul class="yx">
                        <li><a href="#">游戏1</a></li>
                        <li><a href="#">游戏2</a></li>
                        <li><a href="#">游戏3</a></li>
                        <li><a href="#">游戏4</a></li>
                    </ul>
                </li>
                <li><a href="#">博雅新闻</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">客服中心</a></li>
                <li><a href="#">投资者关系</a></li>
            </ul>

>>>>到css部分:

先给【博雅游戏】这个要触发下拉菜单的父亲项,设置定位,遵循【子绝父相】原则

position:relative

.header .nav .byyx{
        position: relative;
    }

再给子元素ul设置定位

.header .nav .byyx .yx{
        position: absolute;
        left: 0;
        top:58px;
        background: #252947;
        z-index: 2;
        display: none;
    }

position:absolute

left:0 (水平方向没有偏移,故为0

top:58px;( 这里的58是父亲项【博雅游戏】的height是58px,需要定位到父亲项的下面 )

background:#252947; 设置背景色

z-index:2  (如果不设置,则没有显示,被背景图给遮住了)

display:none (没有触发父亲项时,不显示下拉菜单)

 


 

再设置ul项里的每个li:

  .header .nav .byyx .yx li{
        width: 85px;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #818496;
    }

li的宽与父亲保持一致,高自己定

最好加个border-bottom

 


 

最后完成触发

.header .nav .byyx:hover ul.yx{
        display: block;
    }

 

搞定!

 

 

本文地址:https://blog.csdn.net/weixin_41306215/article/details/107383760

相关标签: html+css css