Dropdown not working

When I try to create a new Dropdown like this:

    <div class="dropdown"><button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" type="button" style="margin-top: 0;width: 100%;background-color: Orange;">Stimmgruppe</button>
    <div role="menu" class="dropdown-menu"><a href="#">First Item</a><a href="#">Second Item</a><a href="#">Third Item</a></div>
</div>

It isn't showing the list after clicking on it. I think, that the problem is in my css:

    element.style {
}

.dropdown, .dropleft, .dropright, .dropup {
  position: relative;
}

.login-clean form {
  max-width: 320px;
  width: 90%;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 40px;
  border-radius: 4px;
  color: #505e6c;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
}

body, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .navbar, .brand, .btn-simple, .alert, a, .td-name, td, button.close {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: "Roboto","Helvetica Neue",Arial,sans-serif;
  font-weight: 400;
}

body, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .navbar, .brand, .btn-simple, .alert, a, .td-name, td, button.close {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: "Roboto","Helvetica Neue",Arial,sans-serif;
  font-weight: 400;
}

body, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .navbar, .brand, .btn-simple, .alert, a, .td-name, td, button.close {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: "Roboto","Helvetica Neue",Arial,sans-serif;
  font-weight: 400;
}

body {
  margin: 0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

But where is my mistake?

When I test your code in Pinegrow, the dropdown works fine. Perhaps you have a javascript issue?

enter image description here

Just out of curiosity, why are you custom coding a dropdown when there is a dropdown component?

I havn't custom coded it. I just copied the html of the component to paste it here. And I havn't written any javascript at all. :( Sceenshot1 Screenshot2 Screenshot3 Screenshot4 Screenshot5 Please help :(

Can you post a link to your .bsdesign file that I can download and look at?

I made a minimal version of the issue: Link to the project

I would start by removing visibility: hidden and opacity: 0 on the .dropdown-menu

.dropdown-menu {
  /*visibility: hidden;*/
  margin: 0;
  padding: 0;
  border-radius: 10px;
  display: block;
  z-index: 9000;
  position: absolute;
  /*opacity: 0;*/
  filter: alpha(opacity=0);
  -webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125);
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125);
}