[分享]css3垂直下拉菜单

CSS3技术的出现使得网页设计越来越简单而美观，垂直下拉菜单是一个常见的网页设计组件，使用CSS3可以轻松实现。下面我们一步步来看如何实现一个简单的垂直下拉菜单。/ CSS样式 / nav ul { ...

CSS3技术的出现使得网页设计越来越简单而美观，垂直下拉菜单是一个常见的网页设计组件，使用CSS3可以轻松实现。下面我们一步步来看如何实现一个简单的垂直下拉菜单。

/* CSS样式 */
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav li {
  position: relative;
}
nav ul ul {
  position: absolute;
  top: 0;
  left: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}
nav ul li:hover > ul {
  opacity: 1;
  visibility: visible;
  left: 95%;
} 

我们首先创建一个无序列表，去掉列表的默认样式，将每个列表项设置为相对定位。在每个列表项下面再创建一个垂直下拉菜单，将其设置为绝对定位，并将top设置为0，left设置为100%，相当于将垂直下拉菜单推到了列表项的右侧。同时，将其opacity和visibility都设为0，表示初始状态下垂直下拉菜单是不可见的。

在nav ul li:hover > ul的选择器中，当鼠标悬停在列表项上时，将垂直下拉菜单的opacity和visibility都设置为1，表示垂直下拉菜单可见，并将left设置为95%，表示垂直下拉菜单向左偏移一点，增强了视觉效果。

通过这种CSS3技术实现的垂直下拉菜单，不仅美观简单，而且还具有良好的交互效果，提高了网站的用户体验度。