CSS---二级菜单小箭头制作

二级菜单是网页开发中经常遇到的，那么，如何通过css写一个下图所示的二级菜单样式呢？

核心内容：

（1）transform: rotate(45deg);----旋转45度

（2）border-right: transparent;border-bottom: transparent;---- 将border设置为透明色

（3）position:relative----相对定位会按照元素的原始位置对该元素进行移动，定位后空间不释放。left:20" 会向元素的 LEFT 位置添加 20 像素。

position:absolute----绝对定位，相对于最近已定位的祖先元素，如果没有最近已定位的祖先元素，则相对于body，定位后空间被释放。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

（4）:before伪元素选择器----选择器在被选元素的内容前面插入内容， content 属性来指定要插入的内容。

完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #212121;
        }

        /* 亲子代选择器 */
        .nav>li {
            float: left;
            color: #212121;
            font-size: 18px;
            margin: 0 20px;
            height: 40px;
        }

        .nav-sub-list {
            display: none;
            width: 100px;
            height: 100px;
            border: 1px solid #e5e5e5;
            border-radius: 4px;
            background: #fff;
            position: absolute;
            top: 40px;
            left: -31px;
        }

        /* 二级菜单小箭头 */
        .nav .nav-sub-list::before {
            content: "";
            position: absolute;
            top: -5px;
            left: 47px;
            width: 7px;
            height: 7px;
            border: 1px solid #e5e5e5;
            transform: rotate(45deg);
            border-right: transparent;
            border-bottom: transparent;
            background: #fff;
        }

        .nav-fruits {
            position: relative;
        }

        .nav-list:hover {
            color: #e94400;
        }

        .nav-fruits:hover .nav-sub-list {
            display: block
        }

        .nav-sub-list ul {
            padding: 10px 0;
        }

        .nav-sub-list li {
            font-size: 16px;
            text-align: center;
            height: 40px;
            line-height: 40px;
        }

        .nav-sub-list li a {
            color: #434343;
        }

        .nav-sub-list li:hover {
            background: #ddd;
        }

        .nav-sub-list li:hover a {
            color: #e94400;
        }
    </style>
</head>

<body>
    <h2>二级菜单小箭头css制作</h2>
    <ul class="nav">
        <li class=" nav-fruits">
            <a class="nav-list" href="#">水果</a>
            <div class="nav-sub-list">
                <ul>
                    <li>
                        <a href="#">香蕉</a>
                    </li>
                    <li>
                        <a href="#">苹果</a>
                    </li>
                </ul>
            </div>

        </li>
        <li>
            <a class="nav-list" href="#">城市</a>
        </li>
        <li>
            <a class="nav-list" href="#">动物</a>
        </li>

    </ul>

</body>

</html>

CSS---二级菜单小箭头制作

猜你喜欢