﻿.dropdown-container {
    display: flex;
    gap:10px;
    margin-bottom:2px;
}
/* 父容器：承载触发区和弹出层 */
.dropdown {
    position: relative; /* 弹出层绝对定位的参考 */
    display: inline-block; /* 宽度由内容决定，与导航栏兼容 */
    cursor: pointer; /* 提示可交互 */
    font-size: 14px; /* 文字大小 */
}

.dropdown-split {
    position: relative; /* 弹出层绝对定位的参考 */
    display: inline-block; /* 宽度由内容决定，与导航栏兼容 */
    cursor: pointer; /* 提示可交互 */
    font-size: 14px; /* 文字大小 */
}
/* 触发区：白色背景覆盖弹出层上边框的中间区域 */
.dropdown-trigger {
    padding: 0px 32px 0px 12px;
    border: 1px solid #DCDCDC; /* 上、左、右、下 边框（统一颜色） */
    border-radius: 6px 6px 6px 6px; /* 上圆角，下边缘直角 */
    position: relative; /* 三角伪元素的定位参考 */
    background: #FFFFFF; /* 白色背景，覆盖弹出层上边框的中间部分 */
}
    /* 下拉三角（与边框颜色一致） */
    .dropdown-trigger::after {
        content: "";
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #DCDCDC;
    }


/* 弹出层：宽度超过触发区，使右侧露出上边框 */
.dropdown-navmenu {
    position: absolute;
    top: 90%; /* 与触发区底部对齐 */
    left: 0; /* 与触发区左对齐 */
    display: none; /* 初始隐藏 */
    grid-template-columns: repeat(3, auto); /* 3列自动换行 */
    gap: 12px; /* 列间距 */
    padding: 12px; /* 内边距 */
    background: #FFFFFF; /* 白色背景，与触发区一致 */
    border: 1px solid #DCDCDC; /* 上、左、右、下 边框（与触发区同色） */
    border-radius: 0 6px 6px 6px; /* 下圆角，上边缘直角 */
    /*border-top: none;*/
    z-index: 999; /* 确保层级最高 */
    min-width: 600px; /* 强制宽度超过触发区（根据实际调整） */
    background-color:#fffffb;
    font-size:14px;
}

    .dropdown-navmenu::before {
        content: "";
        position: absolute;
        top: 0;
        right: 3px;
        /*width: 188px;*/ /* 设置顶部边框的长度 */
        border-top: 1px solid #DCDCDC; /* 上、左、右、下 边框（与触发区同色） */
        /*height: 1px;*/ /* 设置顶部边框的宽度 */
        /*background-color: #DCDCDC;*/ /* 设置边框颜色 */
    }
    /* 菜单项样式 */
    .dropdown-navmenu a {
        display: block;
        width: auto; /* 固定宽度 */
        height: auto;
        padding: 2px; /* 垂直内边距，水平无内边距（内容居中） */
        text-decoration: none;
        color: #333;
        text-align: center; /* 文字水平居中 */
        border: 1px solid #F2F2F2;
        border-radius: 4px;
        white-space: nowrap; /* 强制文字不换行 */
        overflow: hidden; /* 超出容器隐藏 */
        text-overflow: ellipsis; /* 超出部分显示省略号（可选，需搭配 nowrap） */
        text-align: left;
    }

        .dropdown-navmenu a:hover {
            background-color: #F8F8F8;
        }

/* 悬停交互：显示弹出层 + 隐藏触发区底部边框 */
.dropdown:hover .dropdown-navmenu {
    display: grid; /* 显示弹出层（Grid布局） */
}

.dropdown:hover .dropdown-trigger {
    border-radius: 6px 6px 0 0; /* 上圆角，下边缘直角 */
    border-bottom: none; /* 隐藏触发区底部边框，避免与弹出层上边框重叠 */
}

    .dropdown:hover .dropdown-trigger::before {
        content: "";
        position: absolute;
        bottom: -1px;
        left: 0;
        z-index: 100000000;
        width: 100%;
        /*border-top: 1px solid #DCDCDC;*/ /* 上、左、右、下 边框（与触发区同色） */
        height: 6px;
        background-color: #fff;
    }
