小猿圈之前端css下拉菜单详解

刚学习前端的小伙伴或许对下拉菜单css怎么设置不太了解,小猿圈加加今天对css下拉菜单做一个详细的解释,感兴趣的同学可以学习一下,这是前端的基础。

先用一段代码说明一下:

.dropdown {

    position: relative;

    display: inline-block;

}

.dropdown-content {

    display: none;

    position: absolute;

    background-color: #f9f9f9;

    min-width: 160px;

    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

    padding: 12px 16px;

    z-index: 1;

}

.dropdown:hover .dropdown-content {

    display: block;

}

实例解析

HTML 部分:

我们可以使用任何的 HTML 元素来打开下拉菜单,如:, 或 a

你可能感兴趣的:(小猿圈之前端css下拉菜单详解)