基础 CSS 向下钻取菜单 autoHeight

向下钻取菜单是常见的导航方式，可以在有限空间内展示更多的导航选项。而 autoHeight 是一种实现向下钻取菜单的方式，使菜单高度自动适应内容高度。

实现方式

使用 CSS 伪类和动画实现向下钻取菜单 autoHeight。

1. 将菜单项包含在一个 div 中，设置 div 的高度为 0。

.menu-item {
    height: 0;
    overflow: hidden;
}

2. 当鼠标 hover 时，使用伪类 :hover 显示菜单项。

.menu:hover .menu-item {
    height: auto;
}

3. 为菜单项设置过渡效果，使菜单展开时更加平滑。

.menu-item {
    transition: height 0.3s ease;
}

使用 CSS 伪类和动画实现向下钻取菜单 autoHeight。

1. 将菜单项包含在一个 div 中，设置 div 的高度为 0。

```css
.menu-item {
    height: 0;
    overflow: hidden;
}

2. 当鼠标 hover 时，使用伪类 :hover 显示菜单项。

.menu:hover .menu-item {
    height: auto;
}

3. 为菜单项设置过渡效果，使菜单展开时更加平滑。

.menu-item {
    transition: height 0.3s ease;
}