Drop-down html css

26

/* Dropdown container */
.dropdown {
position: relative;
display: inline-block;
}

/* Dropdown button */
.dropdown-button {
background-color: #007bff;
color: white;
padding: 8px 12px;
border: none;
cursor: pointer;
border-radius: 5px;
}

/* Dropdown menu (hidden by default) */
.dropdown-menu {
position: absolute;
background-color: white;
min-width: 150px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 5px;
list-style: none;
padding: 0;
margin-top: 5px;
}

/* Dropdown items */
.dropdown-menu li {
padding: 10px;
text-align: left;
}

.dropdown-menu a,
.dropdown-menu button {
width: 100%;
display: block;
text-decoration: none;
color: black;
background: none;
border: none;
cursor: pointer;
padding: 10px;
text-align: left;
}

.dropdown-menu a:hover,
.dropdown-menu button:hover {
background-color: #f1f1f1;
}

/* Delete button style */
.delete-btn {
color: red;
}

/* Dropdown container */
.dropdown {
position: relative;
display: inline-block;
}

/* Dropdown button */
.dropdown-button {
background-color: #007bff;
color: white;
padding: 8px 12px;
border: none;
cursor: pointer;
border-radius: 5px;
}

/* Dropdown menu (hidden by default) */
.dropdown-menu {
position: absolute;
background-color: white;
min-width: 150px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 5px;
list-style: none;
padding: 0;
margin-top: 5px;
}

/* Dropdown items */
.dropdown-menu li {
padding: 10px;
text-align: left;
}

.dropdown-menu a,
.dropdown-menu button {
width: 100%;
display: block;
text-decoration: none;
color: black;
background: none;
border: none;
cursor: pointer;
padding: 10px;
text-align: left;
}

.dropdown-menu a:hover,
.dropdown-menu button:hover {
background-color: #f1f1f1;
}

/* Delete button style */
.delete-btn {
color: red;
}

dropdownOpen = false;

toggleDropdown() {
this.dropdownOpen = !this.dropdownOpen;
}

<td> <div class="dropdown"> <button class="dropdown-button" (click)="toggleDropdown()">Actions</button> <ul class="dropdown-menu" *ngIf="dropdownOpen"> <li> <a class="dropdown-item" [routerLink]="['/users', user.customerId]">View</a> </li> <li> <a class="dropdown-item" [routerLink]="['/users/edit', user.customerId]">Edit</a> </li> <li> <button class="dropdown-item delete-btn" (click)="deleteUser(user.customerId)">Delete</button> </li> </ul> </div> </td>