利用CSS制作下拉菜单的简单方法

前言

前端工程师在开发页面的时候，经常会用到二级菜单，下面就跟我一起来实现以下吧。

操作步骤

首先创建一级导航和二级导航

    <nav>
        <a href="#1">一级导航</a>
        <div>
            <a href="#4">二级导航</a><a href="#5">二级导航</a>
        </div>
    </nav>
    <nav>
        <a href="#2">一级导航</a>
        <div>
            <a href="#6">二级导航</a><a href="#7">二级导航</a>
        </div>
    </nav>
    <nav>
        <a href="#3">一级导航</a>
        <div>
            <a href="#8">二级导航</a><a href="#9">二级导航</a>
        </div>
    </nav>

再用css做好准备工作

        div{
            display: flex;
            flex-direction: column;
        }
        a{
            display: inline-block;
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: skyblue;
            text-decoration: none;
        }
        div>a{
            background-color: greenyellow;
		}

你看到的是这样的：

我们再给想要隐藏的二级导航标签添加transform，让它“消失”

	div>a{
		background-color: greenyellow;
		/* 旋转至90度 */
		transform: rotateY(90deg);
	}

然后给它添加hover，让它“现行”

        nav>a:hover+div>a{
        /* 旋转至90度 */
            transform: rotateY(0deg);
        }

效果

鼠标悬停至一级导航，二级导航就会出现。