导航栏

最新推荐文章于 2023-04-08 18:54:17 发布

小白白中之白

最新推荐文章于 2023-04-08 18:54:17 发布

阅读量74

点赞数

分类专栏：网页案例

本文链接：https://blog.csdn.net/m0_53438035/article/details/116143109

版权

网页案例专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .a{
        height: 60px;
        width: 100%;
        position: fixed;
    }
    .main{
       height: 1000px;
    }
    .nav{
        /* z-index: 10; */
        height: 60px;
        width: 100%;
        background-color: brown;/* 定位元素的z-index不是auto的时候就会创建层叠上下文 */
        position: relative;/*  */
        
    }
    .title{
        width: 100px;
        position: absolute;/*  */
        transform: translate(0,-50%);
        top: 50%;
        color: white;
        line-height: 60px;
        font-size: 25px;
        font-weight: 600;
    }
    .text1,.text2{
        position: relative;
        width: 100px;
        height: 60px;
        display: inline-block;
        left: 100px;
        text-align: center;
        line-height: 60px;
        color: white;
        z-index: 10;
    }
    .box1,.box2{
        top: -180px;/* -120容易导致box一出来就碰到鼠标激活box:hover (无动画效果直接闪现到底部)*/
        z-index: -10;
        position: absolute;
        line-height: 60px;
        width: 100px;
        text-align: center;
       /*  background-color: brown; */
        border-radius: 5px;
    }
    .box1{
        
        left: 100px;
    }
    .box2{
        left: 200px;
    }
    .text1:hover~ .box1{
        top: 60px;
        transition: .3s ;
    }
    .text2:hover~ .box2{
        top: 60px;
        transition: .3s;
    }
    .box1:hover{
        top: 60px;
    }
    .box2:hover{
        top: 60px;
    }
    .top1,.top2{
        border-top: solid;
        border-color: #d3e2e8;
    }

  .content1:hover,.content2:hover{
      background-color: brown;
      border-radius: 10px;
      cursor: pointer;
  }
    </style>
</head>
<body>
    <div class="a">
    <div class="nav">
        <div class="title">DESIGN</div>
        <div class="text1">text1</div>
        <div class="text2">text2</div>
        <div class="box1">
                <ul class="list1">
                    <li class="content1">text11</li>
                    <li class="content1 top1">text12</li>
                    <li class="content1 top2">text13</li>
                </ul>
        </div>
        <div class="box2">
                <ul class="list2">
                    <li class="content2">text21</li>
                    <li class="content2 top1">text22</li>
                    <li class="content2 top2">text23</li>
                </ul>
        </div>
    </div>
</div>
<div class="main">

</div>
</body>
</html>