/* style.css */

/* 下拉菜单的父容器 */
.dropdown {
  position: relative;
  display: inline-block;
}

/* “互动影游”触发按钮的样式 */
.dropbtn {
  background-color: transparent; /* RGB(37, 97, 138) 对应的十六进制色值 */
  color: white;
  padding: 10px 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  border-radius: 4px;
  display: inline-block;
}

/* 鼠标悬停在按钮上的变色效果 */
.dropdown:hover .dropbtn {
  background-color: #1c4a6b; /* 悬停时稍微加深的同色系蓝色 */
}

/* 下拉列表内容的默认隐藏与基础样式 */
.dropdown-content {
  display: none; /* 核心：默认隐藏 */
  position: absolute;
  background-color: #25618A; /* 下拉背景改为同色系深蓝 */
  min-width: 180px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 4px;
  top: 100%; /* 紧贴按钮下方显示 */
  left: 0;
}

/* 下拉菜单里各个链接的样式 */
.dropdown-content a {
  color: white; /* 字体改为白色 */
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 14px;
  border-bottom: 1px solid #3a7aa5; /* 分割线颜色微调 */
}

/* 去掉最后一个选项的下边框 */
.dropdown-content a:last-child {
  border-bottom: none;
}

/* 鼠标悬停在下拉选项上的高亮效果 */
.dropdown-content a:hover {
  background-color: #3a7aa5; /* 悬停时变为稍浅的同色系蓝色 */
  color: white;
}

/* 核心交互：鼠标悬停在整个 dropdown 容器时，显示下拉内容 */
.dropdown:hover .dropdown-content {
  display: block;
}

/* 其他普通导航链接的样式 */
.nav-link {
  text-decoration: none;
  color: #333;
  padding: 10px 16px;
  font-size: 16px;
}

.nav-link:hover {
  color: #25618A; /* 普通链接悬停时也呼应主色调 */
}