<!DOCTYPE html>
<html>
<head>
<title>Bulma Dropdown Menu</title>
<link rel='stylesheet'
href=
<script src=
</script>
</head>
<body class="has-text-centered">
<h3 class="is-size-2 has-text-success">
GeeksforGeeks
</h3>
<b>Bulma Dropdown menu</b>
<section class="section">
<div class="container">
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button"
aria-haspopup="true"
aria-controls="dropdown-menu">
<span>Football Players</span>
<span class="icon is-small">
<i class="fa fa-angle-down"
aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu"
id="dropdown-menu"
role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Salah
</a>
<a href="#" class="dropdown-item is-active">
Messi
</a>
<a href="#" class="dropdown-item ">
Cristiano
</a>
<a href="#" class="dropdown-item">
Kane
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
Sterling
</a>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) {
event.stopPropagation();
dropdown.classList.toggle('is-active');
});
});
</script>
</div>
</section>
</body>
</html>