Javascript Dropdown

In this example below you will see how to do a Javascript Dropdown with some HTML / CSS and Javascript

This awesome code was written by WenukaGTX, you can see more from this user in the personal repository.
You can find the original code on
Copyright WenukaGTX ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Javascript Dropdown</title>
      <link rel="stylesheet" href="css/style.css">



  <div class="dropdown" id="fareDropdown">
  <a id="tourFare" class="dropdown-toggle" for="fare-check">Dropdown</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-option" href="#" data-value="Option 1">Option 1</a></li>
    <li><a class="dropdown-option" href="#" data-value="Option 2">Option 2</a></li>
    <li><a class="dropdown-option" href="#" data-value="Option 3">Option 3</a></li>
    <li><a class="dropdown-option" href="#" data-value="Option 4">Option 4</a></li>

    <script  src="js/index.js"></script>



/*Downloaded from */
.dropdown {
  position: relative;
  display: inline-block;
  min-width: 150px;
.dropdown .dropdown-toggle {
  font-size: 14px;
  padding: 16px 15px;
  display: block;
  margin-bottom: 0;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: relative;
  border: 1px solid #ddd;
.dropdown .dropdown-toggle:hover {
  cursor: pointer;
.dropdown .dropdown-toggle:after {
  content: "";
  position: absolute;
  top: 25px;
  right: 15px;
  border-bottom: 5px solid transparent;
  border-top: 5px solid #000;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
.dropdown {
  background: rgba(0, 0, 0, 0.1);
.dropdown {
  top: 20px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid #fff;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
.dropdown ~ .dropdown-menu {
  display: block;
.dropdown .dropdown-menu {
  position: absolute;
  padding: 10px 0;
  list-style: none;
  margin: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  display: none;
  border-top: 1px solid #ddd;
.dropdown .dropdown-menu li a {
  padding: 10px 15px;
  font-size: 20px;
  display: block;
  color: #fff;
  text-align: center;
.dropdown .dropdown-menu li a:hover {
  background: #ddd;

/*Downloaded from */
"use strict";


//dropdown toggle
function dropdownToggle() {
  let dropdown = document.getElementsByClassName("dropdown-toggle");
  for (let i = 0; i < dropdown.length; i++) {
    dropdown[i].onclick = function() {

  let dropOption = document.getElementsByClassName("dropdown-option");
  for (var i = 0; i < dropOption.length; i++) {
    dropOption[i].addEventListener("click", function(event) {
      //            return false;

      let optionVal = this.dataset.value;

  function setFare(value) {
    let dropToggle = document.getElementById("tourFare");
    dropToggle.innerHTML = value;

  window.addEventListener("click", function(e) {
    if (document.getElementById("fareDropdown").contains( {
      // Clicked in box
    } else {
      let dropToggle = document.getElementById("tourFare");
//end dropdown toggle