Existing dropdown menu (no bootstrap) stopped working after bootstrap library use

Question

I have in the client’s page a dropdown menu that the client does not want to exchange. I had to insert a modal on the page and used bootstrap, it worked well. The problem is that the client dropdown menu no longer works. I tried everything and I couldn’t make it work:

• I already changed my name class;
• I switched to id, but nothing solved;
• even in the z-index tried.

Does anyone have any idea?

Remembering that no matter the css of the bootstrap, the menu works perfect.

Follow the menu code:

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family:Verdana, Geneva, sans-serif;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown:hover .dropdown-content {
  display: block;
}

css of boostrap:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

Answer 1

I convinced the client to change the dropdown!