<html lang="zh-cn">
<头>
<title>霓虹灯玻璃形态下拉列表</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">;
/* 全局样式 */
身体 {
保证金：0；
高度：100vh；
显示：柔性；
对齐项目：居中；
调整内容：居中；
背景：线性渐变（135deg，#0f0f0f，#1a1a1a）；
字体系列：'Arial'，无衬线字体；
颜色：#fff；
}
/* 下拉容器 */
.dropdown {
位置：相对；
显示：内联块；
背景：rgba(255, 255, 255, 0.1);
边框半径：12px；
背景过滤器：模糊（15px）；
内边距：20px；
盒子阴影: 0 8px 20px rgba(255, 255, 255, 0.1);
过渡：box-shadow 0.3s 缓动，背景 0.3s 缓动；
}
.dropdown:悬停{
背景：rgba(255, 255, 255, 0.2);
盒子阴影: 0 8px 30px rgba(255, 255, 255, 0.2);
}
.dropdown-btn {
内边距：15 像素 20 像素；
字体大小：16px；
边框：无；
边框半径：8px；
颜色: 白色;
光标：指针；
概要：无；
显示：柔性；
对齐项目：居中；
对齐内容：空间之间；
背景：rgba(255, 255, 255, 0.1);
背景过滤器：模糊（10px）；
盒子阴影：0 5px 15px rgba(0, 0, 0, 0.3);
过渡：背景 0.3 秒缓动，框阴影 0.3 秒缓动；
}
.dropdown-btn:悬停{
背景：rgba(255, 255, 255, 0.2);
盒子阴影: 0 5px 20px rgba(255, 255, 255, 0.5);
}
/* 下拉式菜单 */
。下拉式菜单 {
位置：绝对；
顶部：70 像素；
左：0；
宽度：260 像素；
背景：rgba(255, 255, 255, 0.1);
边框半径：12px；
盒子阴影：0 10px 30px rgba(0, 0, 0, 0.5);
背景过滤器：模糊（15px）；
内边距：10px；
显示：无；
弹性方向：列；
}
.dropdown:悬停 .dropdown-menu {
显示：柔性；
}
.dropdown-menu li {
列表样式：无；
内边距：12 像素 15 像素；
显示：柔性；
对齐项目：居中；
间隙：10px；
光标：指针；
颜色：#fff；
边框半径：8px；
溢出：隐藏；
过渡：背景 0.3 秒缓动，框阴影 0.3 秒缓动，颜色 0.3 秒缓动；
}
/* 图标和文本 */
.dropdown-menu li i {
字体大小：24px；
过渡：颜色0.3s缓和；
}
.dropdown-menu li span {
字体大小：16px；
过渡：颜色0.3s缓和；
}
/* 悬停效果 */
.dropdown-menu li:hover {
背景：线性渐变(135deg, rgba(0, 255, 255, 0.2), rgba(255, 0, 255, 0.2));
框阴影: 0 0 15px rgba(0, 255, 255, 0.5), 0 0 25px rgba(255, 0, 255, 0.4);
颜色：#fff；
}.dropdown-menu li:悬停 i {
颜色：#0ff； /* 霓虹青色 */
}
.dropdown-menu li:悬停范围{
颜色：#f0f； /* 霓虹洋红色 */
}
</风格>
</头>
<div>
</div>
以上是✨ 用玻璃形态和霓虹灯效果改变您的下拉菜单！ ✨的详细内容。更多信息请关注PHP中文网其他相关文章！
