Issue with drop down menu

[vidhya_mouli]

I am having issue with drop-down menu.

The tags in the menu is not displaying properly. They should appear one below the other.

  <div class="multiselect-dropdown">
              <button class="dropdown-toggle" type="button" data-toggle="dropdown">
                <div class="filter-symbol">
                  <img src="Filter.png" alt="Filter Symbol"> <!-- Filter image -->
                </div>
                <span class="filter-text">Filter</span> <!-- Filter text -->
                <span id="selectedTagCount" ng-show="c.getSelectedTagCount() > 0">({{c.getSelectedTagCount()}})</span>
              </button>
              <ul class="dropdown-menu">
                <li>
                  <label>
                    <input type="checkbox" ng-model="c.selectedAllTags" ng-change="c.selectAllTags(announcement, category)"> All
                  </label>
                </li>
                <label ng-repeat="tag3Option in c.tag3Options">
                  <input type="checkbox" ng-model="c.selectedTag3[tag3Option]" ng-change="c.filterByTag3(tag3Option, category)">
                  {{ tag3Option }}
                </label>
              </ul>
            </div>

.multiselect-dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  padding-left: 20px;
  top: 100%; /* Position dropdown menu below the button */
  left: 0;
  z-index: 1000; /* Ensure dropdown appears above other elements */
}

.dropdown-menu:focus{
	display:inline-block;
}

/* Additional styling for dropdown menu if needed */
.dropdown-menu li {
  list-style: none;
}

 Any suggestion to resolve this issue?