css3下拉菜单滑动 |css 让高度等于屏幕宽度

.dropdown-menu {
height: 0;
overflow: hidden:
transition: height 0.3s ease-in-out;
}
.dropdown:hover .dropdown-menu {
height: 200px;
transition: height 0.3s ease-in-out;
}

上面的代码中，大家先将下拉菜单的高度设置为0，同时隐藏溢出的内容。当用户鼠标移到下拉菜单的上方时，大家使用:hover选择器将高度设置为200px，并使用transition属性实现一个平滑的过渡效果。这里的0.3s表示过渡时间，ease-in-out表示动画变化效果。

除了上下滑动的效果，大家还可以通过CSS3的transform属性实现左右滑动的效果。该属性可以让元素在平面内进行旋转、平移和缩放。

.dropdown-menu {
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
}
.dropdown:hover .dropdown-menu {
transform: translateX(0%);
transition: transform 0.3s ease-in-out;
}

上面的代码中，大家将下拉菜单向左平移100%。当用户鼠标移到下拉菜单的上方时，大家使用:hover选择器将下拉菜单的translateX属性设置为0%，这将有一个从左侧滑动到右侧的动画效果。

总之，CSS3下拉菜单滑动效果可以让网站更加动态和有趣，提高用户的体验。开发者可以根据自己的需求选择不同的效果和过渡时间来实现自定义的下拉菜单。