[分享]css三级菜单各种效果图

CSS三级菜单具有丰富的效果图，下面分别介绍：

/* 基础样式 */
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  position: absolute;
  z-index: 1;
}

.menu li:hover > ul {
  display: block;
}

/* 效果图一：下拉菜单 */
.menu ul {
  top: 100%;
  left: 0;
}

/* 效果图二：水平菜单 */
.menu li {
  float: left;
}

/* 效果图三：垂直菜单 */
.menu ul {
  left: 100%;
  top: 0;
}

/* 效果图四：带有动画效果的菜单 */
.menu li {
  position: relative;
}

.menu ul {
  top: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.menu li:hover > ul {
  opacity: 1;
} 

以上是css三级菜单的各种效果图，可以根据自己的需求进行选择使用。