/* 主菜单容器样式 */
  .menu {
    list-style: none;      /* 移除列表默认样式 */
    padding: 0;           /* 清除内边距 */
    margin: 0;            /* 清除外边距 */
    font-family: 微软雅黑;  /* 设置字体 */
    display: flex;        /* 使用弹性布局 */
    flex-wrap: wrap;      /* 允许换行 */
    gap: 8px;             /* 菜单项之间的间距 */
	

	
	
  }
  
  /* 一级菜单项样式 */
  .main-item {
    position: relative;    /* 为子菜单定位做准备 */
    margin-bottom: 15px;  /* 底部间距，防止菜单拥挤 */
  }
  
  /* 一级菜单链接样式 */
  .main-link {

	
		
	    display: inline-block; /* 行内块显示 */
     padding: 10px 20px;   /* 内边距 *
    margin: 0 5px; /* 左右间距2px */
    border: 1px solid #ddd; /* 浅灰色边框 */
    border-radius: 4px; /* 圆角边框 */
    text-decoration: none; /* 去除下划线 */
    color:#666666; 
    background-color: #f4f4f4;; /* 白色背景 */
    transition: all 0.3s ease; /* 添加过渡效果 */
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
	
	
	
  }
  
  /* 一级菜单悬停效果 */
  .main-link:hover {
    background-color: #116ce4;  /* 悬停时深蓝色背景 */
    transform: translateY(-2px); /* 轻微上移效果 */
	color: white;        /* 白色文字 */
  }
  
  /* 二级菜单容器样式 */
  .sub-menu {
    position: absolute;   /* 绝对定位 */
    top: calc(100% + 1px); /* 定位在一级菜单下方10px处 */
    left: 0;              /* 与一级菜单左对齐 */
    list-style: none;     /* 移除列表样式 */
    padding: 5px 0;       /* 内边距 */
    margin: 0;            /* 清除外边距 */
    background-color: #ecf0f1;  /* 浅灰色背景 */
    border-radius: 4px;   /* 圆角 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 阴影效果 */
    display: none;        /* 默认隐藏 */
    min-width: 150px;     /* 最小宽度 */
    z-index: 1000;        /* 确保在最上层 */
    opacity: 0;           /* 初始透明度为0 */
    transform: translateY(10px); /* 初始下移10px */
    transition: all 0.3s ease-out; /* 过渡效果 */
  }
  
  /* 鼠标悬停时显示二级菜单 */
  .main-item:hover .sub-menu {
    display: block;       /* 显示二级菜单 */
    opacity: 1;           /* 完全不透明 */
    transform: translateY(0); /* 回到正常位置 */
    transition-delay: 0.1s;  /* 0.1秒延迟显示，提高用户体验 */
	
  }
  
  /* 二级菜单项样式 */
  .sub-item {
    border-bottom: 1px solid #d5dbdb;  /* 底部边框 */
  }
  
  /* 最后一个二级菜单项去除边框 */
  .sub-item:last-child {
    border-bottom: none;
  }
  
  /* 二级菜单链接样式 */
  .sub-link {
    display: block;       /* 块级显示 */
    padding: 8px 20px;    /* 内边距 */
    color: #2c3e50;       /* 深灰色文字 */
    text-decoration: none; /* 去除下划线 */
    transition: all 0.2s; /* 过渡效果 */
  }
  
  /* 二级菜单链接悬停效果 */
  .sub-link:hover {
    background-color:#999999;  /* 浅蓝色背景 */
    color:#FFFFFF;       /* 蓝色文字 */
    padding-left: 25px;   /* 左侧内边距增加，产生缩进效果 */
  }	
	
	/* 设置当前选中菜单项的样式 */
.active {
    background-color: #116ce4; /* 设置选中项的背景颜色为深蓝色 */
    color: white; /* 设置选中项的文字颜色为白色 */
	border-radius: 4px;

}