当前位置: 首页 > Web前端 > CSS

纯CSS实现下拉菜单

时间:2023-03-31 11:21:03 CSS

,将下拉菜单的ul高度设置为0,隐藏多余部分。设置下拉菜单的高度添加过渡效果,高度为auto时过渡效果无效。<样式>ul{列表样式:无;保证金:0;填充:0;}ullia{显示:块;文字修饰:无;宽度:100px;高度:50px;文本对齐:居中;行高:50px;白颜色;背景色:#2f3e45;}.drop-down{宽度:100px;高度:50px;}.drop-down-content{不透明度:0;高度:0;溢出:隐藏;过渡:全部为1轻松;}p{字体大小:20px;保证金:0;}.drop-down-contentli:hovera{background-color:red;}.nav.drop-down:hover.drop-down-content{不透明度:1;高度:150px;}下拉菜单

  • 菜单1</li>
  • 菜单2
  • 菜单3
  • 内容

    效果图如下: