DROPDOWN WITH CSS

Run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
	/* Style The Dropdown Button */
	.dropbtn {
	  background-color: #FFAACC;
	  color: grey;
	  padding: 16px;
	  font-size: 20px;
	  cursor: pointer;
	}

	/*  position the dropdown content */
	.dropdown {
	  position: relative;
	  display: inline-block;
	}

	/* Dropdown Content hidden by Default */
	.dropdown-content {
	  display: none;
	  position: absolute;
	  background-color: #CCCCCC;
	  min-width: 160px;
	  z-index: 1;
	}

	/* Links inside the dropdown */
	.dropdown-content a {
	  color: black;
	  padding: 12px 16px;
	  text-decoration: none;
	  display: block;
	}

	/* Change color of dropdown links on hover */
	.dropdown-content a:hover {
	background-color: #11f111;
	}

	/* Show the dropdown menu on hover */
	.dropdown:hover .dropdown-content {
	  display: block;
	}
	
</style>

</head>
<body>
    <h2> Dropdown using CSS </h2>
    <div class="dropdown">
	  <button class="dropbtn">Dropdown</button>
	  <div class="dropdown-content">
		<a href="#">Link 1</a>
		<a href="#">Link 2</a>
		<a href="#">Link 3</a>
	  </div>
	</div>
</body>
</html>