How to generate a dropdown menu in the navigation bar using Thymeleaf?-CodePudding

I need to create a dropdown menu in my navigation bar that is displayed on mouse over. I tried to follow the w3c guide without success. Currently I have the following HTML code (with Thymeleaf):

    <div  th:fragment="topNav">
    <a  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>

end the CSS is:

    

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

How can I extend the above code in order to include dropdown menu? Thanks.

CodePudding user response：

I made a simple dropdown using bootstrap, I believe it will meet your needs, you can change the layout to make it your way.

Hope this helps :)

.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-menu.show {
    background: #696969;
    border-radius: 0;
}
.topnav a {
 border-bottom: 1px white solid;
 float: left;
 color: #f2f2f2;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 font-size: 17px;
}
.option{
 width: 100%;
}
.topnav a:hover {
 background-color: #0d47a1;
 color: white;
 }

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div  th:fragment="topNav">
  <div >
    <a  href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
      Account
    </a>

    <ul >
      <li><a  th:href="@{/auth/api/access/login/signout}">Signout</a> </li>
      <li><a  th:if="${userPage}" th:href="@{/auth/api/admin/usersView}" 
      th:text="${userPage}">Users</a></li>
    </ul>
  </div>
</div>