/* 顶层菜单容器，让 itemsBase 横向排列 */
.menuBar {
  white-space: nowrap; /* 父菜单横向排列 */
  display: flex;
  justify-content: space-between;}

/* 每个父菜单容器 */
.itemsBase {
  position: relative;
  display: inline-block;}

/* 父菜单链接样式 */
.items a {
  display: block;
  padding: 0 20px;
  /* background-color: #336699; */
  /*color: white;*/
  color: #083090;
  text-decoration: none;
  line-height: 51px;}

/* 子菜单容器（初始隐藏） */
.itemsOver {
  display: none;
  position: absolute;
  top: 100%; /* 紧贴在父菜单底部 */
  left: 50%; /* 水平居中对齐 */
  transform: translateX(-50%); /* 修正居中位置 */
  background-color: white;
  border: 1px solid #ccc;
  min-width: 160px;
  z-index: 999;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);}

/* 子菜单项 */
.itemsOver .wnp a {
  display: block;
  padding: 12px 16px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;}

/* 子菜单 hover 效果 */
.itemsOver .wnp a:hover {
  background-color: #E6F0FF;
  color: #083090;}

/* 悬停显示子菜单 */
.itemsBase:hover .itemsOver {
  display: block;}

/* 当前项效果
.items a.active {
  color: #083090;
  border-bottom: 4px solid #083090;
}
*/

.items a:hover, .itemsBase:hover .items a {
  background-color: #083090;
  color: white;}

.menu-container {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: stretch;}

.t1 {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;}

.t1 .selected {
    width: 5px;
    height: 100%;
    background-color: transparent;}


.t1 a {
    flex-grow: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #333;
    height: 100%;
    font-size: 18px;}

/* 选中状态 */
.t1 a.active {
    color: #083090; /* 选中颜色 */
    font-weight: bold;}

.t1 .selected.active { /* 配合选中链接激活 .selected 样式 */
    background-color: #083090;}


/* --- 子菜单样式 (保持原有的层级关系和定位，确保它能浮动在上方) --- */
/* 子菜单容器（初始隐藏，并浮动在父菜单下方） */
/* 这里的 display:none 之后通常会配合 JS 或 :hover 伪类来控制显示 */
.t2 {
    display: none; /* 默认隐藏 */
    position: absolute; /* 相对于其定位父级定位（通常是 .t1，但这里 .t1 没有 position: relative; ） */
                       /* 所以，如果 .t2 应该相对于 .t1 定位，需要在 .t1 上加 position: relative; */
                       /* 你的原始代码中没有给 .t1 加 position: relative;，如果 .t2 应该在 .t1 之下，需要添加。 */
    /* 假设 .t2 应该在 .t1 的下方居中 */
    /* 那么 .t1 需要 position: relative; */
    top: 100%; /* 紧贴在父菜单底部 */
    left: 50%; /* 水平居中对齐 */
    transform: translateX(-50%); /* 修正居中位置 */
    background-color: white;
    border: 1px solid #ccc;
    min-width: 160px;
    z-index: 999; /* 确保在其他内容之上 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    /* 如果要添加动画，请参考之前对子菜单动画的回答 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;}

/* 悬停在一级菜单项上时显示子菜单 */
.t1:hover > .t2 { /* 注意这里：需要确保 .t2 是 .t1 的直接或间接子元素 */
    display: block; /* 或者通过 opacity/visibility 方式显示 */
    opacity: 1;
    visibility: visible;}


/* 子菜单项 */
.t2 a {
    display: flex; /* 使内部元素可以弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    padding: 12px 16px;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    text-align: center;}

/* 子菜单项中的 .selected */
.t2 a .selected {
    width: 5px; /* 示例宽度 */
    height: 100%; /* 示例高度 */
    background-color: transparent;
    margin-right: 5px;}

/* 子菜单 hover 效果 */
.t2 a:hover {
    background-color: #E6F0FF;
    color: #083090;}

/* 子菜单选中效果 */
.t2 a.active {
    color: #083090;
    font-weight: bold;}

.t2 a.active .selected {
    background-color: #083090;}