如何使用Thymeleaf在导航栏中实现鼠标悬停显示的下拉菜单？

你可以按照以下方式扩展现有代码，实现鼠标悬停显示的下拉菜单：

现有代码参考 #

HTML（Thymeleaf）

<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>

CSS

.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;
 }

修改后的完整代码 #

HTML（添加下拉菜单结构）

<div class="topnav" th:fragment="topNav">
    <a class="active" th:href="@{/auth/api/all/accountView}"> Account </a>
    <!-- 新增下拉菜单容器 -->
    <div class="dropdown">
        <a class="dropdown-btn">更多选项</a>
        <div class="dropdown-content">
            <a th:href="@{/auth/api/some/page1}">页面1</a>
            <a th:href="@{/auth/api/some/page2}">页面2</a>
            <th:block th:if="${userPage}">
                <a th:href="@{/auth/api/admin/usersView}" th:text="${userPage}">Users</a>
            </th:block>
        </div>
    </div>
    <a th:href="@{/auth/api/access/login/signout}">Signout</a> 
</div>

CSS（添加下拉菜单样式）

.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, .dropdown-btn {
 float: left;
 color: #f2f2f2;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 font-size: 17px;
 background-color: inherit;
 border: none;
 outline: none;
 font-family: inherit;
}

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

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

/* 下拉菜单容器 */
.dropdown {
 float: left;
 overflow: hidden;
}

/* 下拉内容默认隐藏 */
.dropdown-content {
 display: none;
 position: absolute;
 top: 57px; /* 和导航栏高度匹配（14+14+17≈57） */
 background-color: #f9f9f9;
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index: 1;
}

/* 下拉菜单链接样式 */
.dropdown-content a {
 float: none;
 color: black;
 padding: 12px 16px;
 text-decoration: none;
 display: block;
 text-align: left;
}

/* 下拉链接 hover 样式 */
.dropdown-content a:hover {
 background-color: #ddd;
 color: black;
}

/* 鼠标悬停时显示下拉内容 */
.dropdown:hover .dropdown-content {
 display: block;
}

关键说明 #

• 新增.dropdown容器包裹下拉按钮和下拉内容，确保布局和原有导航项对齐
• 下拉按钮.dropdown-btn复用原有导航链接的样式，保持视觉统一
• 通过position: absolute让下拉内容脱离文档流，避免撑开导航栏
• 用.dropdown:hover .dropdown-content实现鼠标悬停时显示下拉菜单
• 可以根据需求调整下拉内容的位置、宽度和样式，比如修改top值匹配导航栏高度

内容的提问来源于stack exchange，提问作者Discipulos