Posted on | by liu
CSS基础下拉菜单怎么做
在网页开发中，下拉菜单是一个非常常见的功能。通过下拉菜单可以方便用户选择所需要的选项。下面介绍如何使用CSS制作基础下拉菜单。
首先，在HTML中创建一个菜单的容器，例如使用ul和li标签，如下：
<ul class="menu">
<li>菜单1
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
</ul>
</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
其中，第一层的li标签为一级菜单，其中含有一个子菜单的ul标签。子菜单的li标签为二级菜单。
接下来，为菜单添加CSS样式。首先，去掉默认的列表样式，可以使用以下样式：
.menu {
list-style: none;
margin: 0;
padding: 0;
}其中，list-style为列表样式属性，将li标签的默认样式去掉。无序列表的默认样式为实心圆点，有序列表的默认样式为数字。
接着，设置一级菜单的样式，字体、背景颜色、鼠标悬停效果等等：
.menu >li {
display: inline-block;
font-size: 16px;
padding: 10px 20px;
background-color: #eee;
border-radius: 5px;
}
.menu >li:hover {
background-color: #ccc;
}其中，display为显示方式，将li标签默认的块级显示方式改为行内块级显示方式，可以使得菜单水平排列。同时，padding用于设置菜单项的内边距。border-radius为圆角属性，将菜单项设置为圆角矩形。
同时，在:hover伪类中设置鼠标悬停时的背景颜色，可以呈现出菜单项被激活后的视觉效果。
最后，设置子菜单的样式，隐藏子菜单，当一级菜单被悬停时显示：
.menu ul {
display: none;
position: absolute;
z-index: 1;
}
.menu >li:hover ul {
display: block;
}
.menu ul li {
display: block;
background-color: #fff;
}
.menu ul li:hover {
background-color: #ccc;
}其中，display:none用于隐藏子菜单。position:absolute用于设置子菜单的位置，该属性将子菜单设置为相对于页面的绝对位置。z-index属性用于设置子菜单的层级关系，使其在相同层级的其他元素之上。
当一级菜单被悬停时，通过menu >li:hover ul选择器，将子菜单的display属性设置为block，即显示出来。
最后，设置子菜单的样式和鼠标悬停效果等。
通过以上步骤，大家就可以通过CSS制作一个基础的下拉菜单了。当然，下拉菜单的样式还可以继续优化，例如菜单的动画效果等等。