/* 第一步:设置下拉菜单的样式 */ .dropdown { position: relative; display: inline-block; font-size: 16px; } /* 第二步:设置下拉菜单按钮样式 */ .dropdown button { background-color: #6699CC; color: #fff; border: none; padding: 10px 20px; cursor: pointer; } /* 第三步:设置下拉菜单选项样式 */ .dropdown ul { position: absolute; z-index: 1; background-color: #fff; list-style: none; margin: 0; padding: 0; border: 1px solid #ccc; transition: all 0.5s ease-in-out; opacity: 0; visibility: hidden; } .dropdown ul li { padding: 10px; cursor: pointer; } /* 第四步:设置下拉菜单显示/隐藏效果 */ .dropdown:hover ul { opacity: 1; visibility: visible; } .dropdown ul li:hover { background-color: #f1f1f1; }
以上代码中,我们使用了一个class名为“dropdown”的div包含了一个button和一个ul。其中,button作为下拉菜单的按钮,ul作为下拉菜单的选项。
我们通过设置ul的display属性为none,使得下拉菜单在默认情况下处于隐藏状态。当用户将鼠标放在button上时,我们将ul的display属性改为block,从而显示下拉菜单。
通过CSS属性transition,我们使得下拉菜单在显示/隐藏时有一个渐变效果(设为0.5秒)。
总的来说,这个方法较为简单,当然,如果你想要实现更复杂的下拉菜单,可以考虑使用JavaScript或者一些基于CSS的框架。