当前位置：网站首页>下拉框三角的简易设置

下拉框三角的简易设置

2022-07-19 05:21:00 【陌 年】

<!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>

      *{

          margin: 0;

          height: 0;

      }

      li{

          list-style: none;

      }

      a{

          text-decoration: none;

      }

      .box{

          width: 100px;

          height: 30px;

          background-color: aqua;

          margin: 0 auto;

          position:relative;

      }

      .content>a{

          width: 100px;

          padding-left: 30px;      

      }

      .box1{

          width: 150px;

          height: 100px;

          background-color: bisque;

          margin-top: 8px;

          margin-left:-65px;

          display: none;

      }

      .box:hover .box1{

          display: block;

      }

      .box1::after{

          content: '';

          display: block;

          width: 0;

          height: 0;

          border: 8px solid red;

          border-color:transparent transparent red transparent;

          position: absolute;

          left: 40px;

          bottom: 0;

      }

    </style>

</head>

<body>

    <div class="box">

       <div class="content"> <a href="#">下载</a>

        <ul>

            <li class="box1"><a href="#"></a></li>

        </ul>

    </div>

    </div>

</body>

</html>

 

 

原网站

版权声明
本文为[陌 年]所创，转载请带上原文链接，感谢
https://blog.csdn.net/csc2856891204/article/details/125666698

边栏推荐

猜你喜欢

随机推荐