导航条样式源码

HTML/XML浏览复制<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>透感微光玻璃导航 - 完美间距修复版</title>
<style>
    /* ==================== 基础重置与变量 ==================== */
    :root {
        --accent: #ff5e00;
        --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    
    /* 彩色动态渐变背景，用于凸显“透明玻璃”的折射质感 */
    body {
        font-family: var(--font-family);
        background: linear-gradient(135deg, #0f172a 0%, #1e3c72 40%, #ff5e00 100%);
        background-size: 200% 200%;
        animation: gradientMove 15s ease infinite;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 80px 20px;
    }
    @keyframes gradientMove {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    /* ==================== 演示容器与标题 ==================== */
    .demo-title {
        font-size: 24px;
        color: #ffffff;
        font-weight: 800;
        margin-bottom: 20px;
        text-align: center;
        text-shadow: 0 4px 15px rgba(0,0,0,0.4);
    }
    .demo-title span {
        font-size: 14px;
        font-weight: 400;
        color: rgba(255,255,255,0.7);
        display: block;
        margin-top: 8px;
    }

    /* 导航外层容器（演示用） */
    .demo-box {
        width: 100%;
        max-width: 1200px;
        position: relative;
        z-index: 10;
        margin-bottom: 50px;
    }

    /* ==================== 导航核心样式 ==================== */
    .nav-container {
        display: flex;
        justify-content: center;
        padding: 0 30px;
        border-radius: 20px;
        position: relative;
        z-index: 20;
        
        /* 透感微光玻璃核心 */
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .nav-item {
        position: relative;
        padding: 24px 24px;
        font-size: 16px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.9);
        cursor: pointer;
        transition: var(--transition-smooth);
        display: flex;
        align-items: center;
    }
    
    /* 导航项悬停发光 */
    .nav-item:hover {
        color: #ffffff;
        text-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
    }

    /* ==================== 二级菜单（下拉面板） ==================== */
    .dropdown {
        position: absolute;
        /* 🔴 核心修复点1：在紧贴的基础上，向下推开 12px 间距 */
        top: calc(100% + 12px); 
        left: 50%;
        /* 默认隐藏状态：向下偏移、缩放、透明 */
        transform: translateX(-50%) translateY(15px) scale(0.95);
        width: 220px;
        padding: 12px 0;
        border-radius: 16px;
        opacity: 0;
        visibility: hidden;
        transition: var(--transition-smooth);
        z-index: 100;

        /* 透感微光玻璃（二级菜单） */
        background: rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.25);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    /* 悬停展开 */
    .nav-item:hover .dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0) scale(1);
    }

    /* 🔴 核心修复点2：悬停桥接区（隐形垫片），防止鼠标穿过 12px 间隙时菜单消失 */
    .dropdown::before {
        content: '';
        position: absolute;
        top: -16px; /* 向上延伸覆盖 12px 间隙 */
        left: 0;
        width: 100%;
        height: 16px;
        background: transparent; /* 完全透明，但能触发 hover */
    }

    /* 二级菜单项 */
    .dropdown a {
        display: block;
        padding: 14px 28px;
        text-decoration: none;
        font-size: 15px;
        color: rgba(255, 255, 255, 0.75);
        transition: var(--transition-smooth);
        white-space: nowrap;
    }

    /* 二级菜单项悬停 */
    .dropdown a:hover {
        background: rgba(255, 255, 255, 0.15); /* 微光底 */
        color: #ffffff;
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
        padding-left: 34px; /* 丝滑右移效果 */
    }

    /* 导航箭头（仅带下拉的项显示） */
    .nav-item.has-dropdown::after {
        content: '';
        display: inline-block;
        margin-left: 8px;
        border: solid currentColor;
        border-width: 0 1.5px 1.5px 0;
        padding: 3px;
        transform: rotate(45deg) translateY(-3px);
        transition: transform 0.3s ease;
        opacity: 0.7;
    }
    .nav-item.has-dropdown:hover::after {
        transform: rotate(-135deg) translateY(-3px);
        opacity: 1;
    }

    /* 移动端简单适配（演示用） */
    @media (max-width: 768px) {
        .nav-container { flex-wrap: wrap; padding: 10px; border-radius: 16px; }
        .nav-item { padding: 14px 12px; font-size: 14px; }
        .dropdown { position: static; transform: none; opacity: 1; visibility: visible; display: none; width: 100%; background: transparent; border: none; box-shadow: none; margin-top: 10px; }
        .nav-item:hover .dropdown { display: block; }
        .dropdown::before { display: none; }
    }
</style>
</head>
<body>

    <div class="demo-title">
        透感微光玻璃导航
        <span>完美修复二级菜单间距 + 防闪退悬停桥接</span>
    </div>

    <!-- 演示区块 -->
    <div class="demo-box">
        <nav class="nav-container">
            <div class="nav-item">首页</div>
            
            <div class="nav-item has-dropdown">产品与服务
                <div class="dropdown">
                    <a href="#">小程序开发</a>
                    <a href="#">官网建设</a>
                    <a href="#">业务系统定制</a>
                    <a href="#">SaaS平台搭建</a>
                </div>
            </div>
            
            <div class="nav-item has-dropdown">开发案例
                <div class="dropdown">
                    <a href="#">电商零售</a>
                    <a href="#">教育培训</a>
                    <a href="#">医疗健康</a>
                    <a href="#">金融科技</a>
                </div>
            </div>
            
            <div class="nav-item">新闻资讯</div>
            <div class="nav-item">关于我们</div>
            
            <div class="nav-item has-dropdown">优化GEO
                <div class="dropdown">
                    <a href="#">GEO基础优化</a>
                    <a href="#">AI内容优化</a>
                    <a href="#">本地SEO</a>
                </div>
            </div>
            
            <div class="nav-item has-dropdown">Ai超市
                <div class="dropdown">
                    <a href="#">智能客服</a>
                    <a href="#">AI绘画</a>
                    <a href="#">大模型API</a>
                </div>
            </div>
        </nav>
    </div>

</body>
</html>