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