css实现顶部导航条及下拉框

一、原理

1. 设置外部盒子来充当导航条

2. 设置内部盒子来盛放导航条中元素

3. 导航条中元素使用无序列表并去掉下划线及小圆点，使其浮动以达到水平摆放的效果

4. 鼠标移入时显示下拉框（隐藏元素），则鼠标移入的元素和下拉框元素为兄弟关系，而且两者必须要有相同的父元素

5. 隐藏的元素使用决定定位，兄弟元素使用相对定位，使隐藏的元素相对于兄弟元素定位

6. 将伪类：hover绑定给父元素，使父元素触发引出下拉框事件

7. 设置下拉框的层级比其他元素高，使其悬浮时盖住其他元素以显示出来

二、HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>boke</title>
    <link rel="stylesheet" href="./boke.css">
</head>
<body>
<!--    外部容器-->
    <div class="top-bar-wrapper">
<!--     内部容器-->
      <div class="top-bar clearfix">
<!--          设置父元素-->
        <div class="top-nav">
<!--            鼠标移入出现下拉框元素-->
            <ul class="nav">
                 <li>
                    <a href="#">X系列</a>
                 </li>
                 <li>
                    <a href="#">S系列</a>
                 </li>
                 <li>
                     <a href="#">T系列</a>
                 </li>
                 <li>
                     <a href="#">Y系列</a>
                 </li>
                 <li>
                     <a href="#">iQOO手机</a>
                 </li>
                 <li>
                     <a href="#">智能硬件</a>
                 </li>
                 <li>
                     <a href="#">商城</a>
                 </li>
                 <li>
                     <a href="#">服务</a>
                 </li>
            </ul>
<!--            下拉框元素-->
            <div class="list"></div>
        </div>
      </div>
    </div>

</body>
</html>

三、CSS

1.设置外部容器样式

/*设置外部容器样式*/
.top-bar-wrapper{
    background-color: dimgray;
    height:60px;
    margin: 0 auto;
}

2.设置内部容器样式

/*设置内部容器样式*/
.top-bar{
    /*固定宽度*/
    width: 900px;
    /*水平居中*/
    margin: 0 auto;
    position: relative;
}

3.设置导航条中的元素

.nav li{
    float: left;
    /*去除无序列表中的下划线*/
    list-style: none;
    /*文字在父元素中居中*/
    line-height: 40px;
}
.nav a{
    /*将行内元素变为块元素*/
    display: block;
    /*去除无序列表中的小圆点*/
    text-decoration: none;
    /*字体颜色*/
    color: white;
    /*字体大小*/
    font-size: 17px;
    /*设置内边距*/
    padding: 0 27px;
}
/*鼠标移入时a的效果*/
.nav a:hover{
    color: deepskyblue;
}

4.设置下拉框元素

/*列表样式*/
.top-nav .list{
    display: none;
    width:900px;
    height: 400px;
    background-color: dimgray;
    top: 0 ;
    position: absolute;
    z-index: 999;
}

5.设置父元素

.top-nav{
    float: left;
}

.top-nav:hover .list{
    display: block;
}

.nav{
    position: relative;
    z-index: 9999;
}

6.效果展示

导航条
在这里插入图片描述

# 开发语言 # 前端 # css
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生