Create a dropdown menu on regular button in the page (not menu)

Hi,
Sorry for the late reply, the css on the CodePen page had to be adjusted because it didn’t account for other css included on the page with a higher specificity. I have combined the html and the css to be used within a code block element, just copy all of this code and add to a code block element and it should work fine.

<style>
.dropdown {
  position: relative;
  display: inline-block;
  text-align: left;
  width: 132px;
}

.dropdown-text {
  cursor: pointer;
  position: absolute;
  text-indent: 10px;
  line-height: 32px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
  width: 100%;
  color: #333;
}

.dropdown-text:after {
  position: absolute;
  right: 6px;
  top: 15px;
  content: '';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  border-color: #555 transparent transparent transparent;
  color: #333;
}

.dropdown-text,
#top #main ul.dropdown-content a {
  color: #333; 
  text-shadow: 0 1px #fff;
}

#top #main input.dropdown-toggle[type='text'] {
  font-size: 0;
  z-index: 1;
  cursor: pointer;
  position: absolute;
  top: 0;
  border: none;
  padding: 0;
  margin: 0 0 0 1px;
  background: transparent;
  text-indent: -10px;
  height: 34px;
  width: 100%;
  color: #333; 
}

#top #main input.dropdown-toggle[type='text']:focus {
  outline: 0;
}

#top #main ul.dropdown-content  {
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
  list-style-type: none;
  position: absolute;
  top: 32px;
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility:hidden;
  border-radius: 3px;
  text-indent: 10px;
  line-height: 32px;
  background-color: #eee;
  border: 1px solid #ccc;
  width: 140px;
}

#top #main ul.dropdown-content a {
  display: block;
  text-decoration: none;
}

#top #main ul.dropdown-content a:hover {
  background: #e8e8e8;
}


#top #main input.dropdown-toggle[type='text']:hover ~ .dropdown-text,
#top #main input.dropdown-toggle[type='text']:focus ~ .dropdown-text {
  background-color: #e8e8e8;
}

#top #main input.dropdown-toggle[type='text']:focus ~ .dropdown-text {
  box-shadow: 0 1px 3px rgba(0,0,0, .2) inset, 0 1px 0 rgba(255,255,255, 0.8);
  z-index: 2;
}

#top #main input.dropdown-toggle[type='text']:focus ~ .dropdown-text:after {
  border-width: 0 4px 5px 4px;
  border-color: transparent transparent #555 transparent;
}

#top #main ul.dropdown-content:hover,
#top #main input.dropdown-toggle[type='text']:focus ~ .dropdown-content {
  opacity: 1;
  visibility:visible;
  top: 42px;
}

</style>

<p><i>To show/hide menu, I'm using :focus instead of checkbox so when you click somewhere else then menu will be hidden :).</i></p>

<div class="dropdown">
  <input class="dropdown-toggle" type="text">
  <div class="dropdown-text">Account</div>
  <ul class="dropdown-content">
    <li><a href="#">Settings</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Log out</a></li>
  </ul>
</div>

expected results:

Best regards,
Mike

Hi,

@Eric: Where can we see the issue? The dropdown in the contact page/s (see private field) looks fine. Please provide a direct link to the page displaying the issue.

Best regards,
Ismael

Hi,
Thanks for the login, but I see that you have 3 errors Uncaught SyntaxError: Unexpected token '<' it looks like line brakes in your scripts <br />
Please see the screenshot in Private Content area.

Best regards,
Mike

Hi,
That is because this is not your thread, it belongs to kilimats

Best regards,
Mike