在Thymeleaf导航栏中集成Bootstrap下拉菜单

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

<div class="topnav" th:fragment="topNav">
    <a class="active" th:href="@{/auth/api/all/accountView}"> Account </a>
    <a th:href="@{/auth/api/access/login/signout}">Signout</a> 
    <a th:if="${userPage}" th:href="@{/auth/api/admin/usersView}" 
    th:text="${userPage}">Users</a> 
</div>

<div class="topnav" th:fragment="topNav">
  <div class="dropdown">
    <!-- 下拉菜单触发按钮 -->
    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
      Account
    </a>

    <!-- 下拉菜单列表 -->
    <ul class="dropdown-menu">
      <li><a class="option" th:href="@{/auth/api/access/login/signout}">Signout</a> </li>
      <li><a class="option" th:if="${userPage}" th:href="@{/auth/api/admin/usersView}" 
      th:text="${userPage}">Users</a></li>
    </ul>
  </div>
</div>

.topnav {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #0d47a1;
  color: white;
}

.topnav a.active {
  background-color: #4285F4;
  color: white;
}

.topnav {
  background-color: #333;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
  /* 确保dropdown在topnav内部布局正常，如果需要，可以添加flex或grid布局 */
  display: flex; /* 示例：使topnav内的元素横向排列 */
  align-items: center; /* 示例：垂直居中 */
}

/* 调整topnav内部链接的样式，以适应下拉菜单的触发按钮 */
.topnav a {
  /* border-bottom: 1px white solid; /* 根据需要添加或移除 */
  float: none; /* 如果topnav是flex布局，则不再需要float */
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block; /* 确保链接占据完整空间 */
}

/* 下拉菜单展开时的背景和圆角 */
.dropdown-menu.show {
    background: #696969; /* 下拉菜单展开时的背景色 */
    border-radius: 0; /* 移除默认圆角 */
    padding: 0; /* 移除默认内边距，以便子项填充 */
}

/* 下拉菜单项的样式 */
.dropdown-menu .option {
    width: 100%; /* 使下拉菜单项宽度填充整个菜单 */
    color: #f2f2f2; /* 文本颜色 */
    padding: 10px 16px; /* 内边距 */
    text-align: left; /* 文本左对齐 */
    display: block; /* 确保链接占据完整空间 */
    text-decoration: none; /* 移除下划线 */
    background-color: transparent; /* 默认背景透明 */
    border: none; /* 移除边框 */
}

.dropdown-menu .option:hover {
    background-color: #0d47a1; /* 悬停背景色 */
    color: white; /* 悬停文本颜色 */
}

/* 现有导航栏链接的悬停和激活样式保持不变 */
.topnav a:hover {
  background-color: #0d47a1;
  color: white;
}

.topnav a.active {
  background-color: #4285F4;
  color: white;
}

/* 针对dropdown-toggle按钮在topnav内的样式调整 */
.topnav .dropdown .dropdown-toggle {
  /* 覆盖Bootstrap默认按钮样式，使其更像导航链接 */
  background-color: transparent; /* 默认透明 */
  border: none; /* 移除边框 */
  color: #f2f2f2; /* 文本颜色 */
  padding: 14px 16px; /* 与其他导航链接一致的内边距 */
  font-size: 17px; /* 与其他导航链接一致的字体大小 */
  text-align: center;
  text-decoration: none;
  display: flex; /* 使用flex布局，使图标和文本对齐 */
  align-items: center;
}

.topnav .dropdown .dropdown-toggle::after {
    /* 调整或隐藏下拉箭头 */
    vertical-align: middle;
    margin-left: .255em;
}

.topnav .dropdown .dropdown-toggle:hover {
  background-color: #0d47a1;
  color: white;
}