[分享]css写一个2级下拉菜单

CSS是Cascading Style Sheets（层叠样式表）的缩写，它是一种用来修饰和美化网页的语言。在网页制作中，下拉菜单是一个非常常用而且很实用的功能。在本文中，我们将学习如何使用CSS编写...

CSS是Cascading Style Sheets（层叠样式表）的缩写，它是一种用来修饰和美化网页的语言。在网页制作中，下拉菜单是一个非常常用而且很实用的功能。在本文中，我们将学习如何使用CSS编写一个简单的2级下拉菜单。

在编写2级下拉菜单之前，我们需要先了解一些基础知识。首先是CSS选择器的概念。选择器是用来选择特定HTML元素并对其进行样式处理的。例如，要选择所有的段落元素，可以使用p选择器。其次，我们需要知道什么是伪类。伪类是用来选择某些特殊状态的选择器。例如，:hover伪类是用来表示当鼠标悬停在一个元素上时的状态。

/*CSS样式代码*/

/*第一级菜单*/
.menu-item {
    position: relative;
    display: inline-block;
}

/*第二级菜单*/
.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
}

/*鼠标悬停 第一级菜单 显示 第二级菜单*/
.menu-item:hover .sub-menu {
    display: block;
}

/*第二级菜单最后一个li去除下边距*/
.sub-menu li:last-child {
    margin-bottom: 0;
} 

以上是我们给出的样式代码，其中，.menu-item是第一级菜单的类名，.sub-menu是第二级菜单的类名。我们给第一级菜单添加了position:relative属性，以便让第二级菜单相对于第一级菜单进行定位。同时，我们为第二级菜单设置了display:none属性，将其隐藏。当鼠标悬停在第一级菜单上时，我们使用伪类:hover来控制第二级菜单的显示与隐藏。

以上就是我们的2级下拉菜单实现的方法，如果需要实现更多级别的下拉菜单，可以在第二级菜单中再添加子菜单。CSS中嵌套的层数没有限制。