/* ===== 基础变量（可按需修改） ===== */
:root{
  --nav-bg:#042376;
  --nav-bg-2:#062f93;
  --nav-text:#fff;
  --nav-accent:#60aff6;
  --shadow:0 12px 28px rgba(2,12,66,.22),0 2px 8px rgba(2,12,66,.14);
}

/* ===== 顶部导航布局 ===== */
.nav{
  position: relative;
  display: flex;
  justify-content: center;
}
.nav .menu{
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
}
.nav > .menu > li{
  position: relative;
  padding: 13px 40px;
  height: 40px;                /* 顶部一级视觉高度 */
  letter-spacing: 2px;
  text-align: center;
}
.nav > .menu > li > a{
  color: var(--nav-text);
  font-size: 16px;
  text-decoration: none;
}

/* ===== 二/三级下拉容器（统一风格） ===== */
.nav .nav_list,
.nav .sub_nav_list{
  position: absolute;
  display: none;               /* 初始化隐藏 */
  min-width: 152px;
  padding: 8px;
  text-align: center;
  background: linear-gradient(180deg, #003366, #002047);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 1000;
}

/* 二级定位：自一级底部下拉 */
.nav > .menu > li > .nav_list{
  top: 100%;
  left: 0;
  overflow: visible;           /* 允许右侧展开三级 */
}

/* 三级定位：相对当前二级项右侧展开，顶部对齐该项 */
.nav .nav_list > li{ position: relative; }
.nav .nav_list > li > .sub_nav_list{
  top: 0;
  left: 100%;
  z-index: 1001;
}

/* ===== 二/三级条目与链接（统一） ===== */
.nav .nav_list > li,
.nav .sub_nav_list > li{
  line-height: 1.2;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.nav .nav_list > li:first-child,
.nav .sub_nav_list > li:first-child{
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.nav .nav_list a,
.nav .sub_nav_list a{
  display: block;
  padding: 10px 14px;
  color: var(--nav-text);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 8px;
}

/* ===== Hover 效果（层级互不干扰） ===== */
/* 二级本行高亮，不影响其下三级 */
.nav > .menu > li > .nav_list > li:hover > a{
  background: rgba(96,175,246,.14);
  color: var(--nav-accent);
}
/* 三级本行高亮 */
.nav .sub_nav_list > li:hover > a{
  background: rgba(96,175,246,.14);
  color: var(--nav-accent);
}

/* ===== 纯 CSS 展开（JS 失效时兜底） ===== */
.nav > .menu > li:hover > .nav_list{ display: block; }
.nav .nav_list > li:hover > .sub_nav_list{ display: block; }

/* ===== 可选：有三级的二级项加箭头（若你在 JS 中为其加 .has-children） ===== */
.nav .nav_list > li.has-children > a::after{
  content: "›";
  float: right;
  font-size: 15px;
  opacity: .75;
}
.nav .nav_list > li.has-children:hover > a::after{ opacity: 1; }

/* ===== 可选：右侧空间不足时向左展开（给对应二级 li 加 .flip-left） ===== */
.nav .nav_list > li.flip-left > .sub_nav_list{
  left: auto;
  right: 100%;
}