✨ 用玻璃造型和霓虹燈效果改變您的下拉式選單！ ✨

  
  
  <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中文網其他相關文章！