<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
/>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
/>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
/>
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
</
head
>
<
body
>
<
div
class
=
"content container has-text-centered"
>
<
h1
class
=
"title has-text-success"
>GeekforGeeks</
h1
>
<
h1
class
=
"subtitle"
>Bulma Hoverable or Toggable Dropdown</
h1
>
<
div
class
=
"container m-4"
>
<
div
class
=
"dropdown "
>
<
div
class
=
"dropdown-trigger"
>
<
button
class
=
"button"
aria-haspopup
=
"true"
aria-controls
=
"dropdown-menu3"
>
<
span
>Normal dropdown</
span
>
<
span
class
=
"icon is-small"
>
<
i
class
=
"fas fa-angle-down"
aria-hidden
=
"true"
></
i
>
</
span
>
</
button
>
</
div
>
<
div
class
=
"dropdown-menu"
id
=
"dropdown-menu3"
role
=
"menu"
>
<
div
class
=
"dropdown-content"
>
<
a
href
=
"#"
class
=
"dropdown-item"
> Java </
a
>
<
a
href
=
"#"
class
=
"dropdown-item"
> C++ </
a
>
<
a
href
=
"#"
class
=
"dropdown-item"
> Python </
a
>
<
a
href
=
"#"
class
=
"dropdown-item"
> C </
a
>
<
hr
class
=
"dropdown-divider"
/>
<
a
href
=
"#"
class
=
"dropdown-item"
> DSA </
a
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"dropdown is-hoverable"
>
<
div
class
=
"dropdown-trigger"
>
<
button
class
=
"button"
aria-haspopup
=
"true"
aria-controls
=
"dropdown-menu4"
>
<
span
>Hoverable dropdown</
span
>
<
span
class
=
"icon is-small"
>
<
i
class
=
"fas fa-angle-down"
aria-hidden
=
"true"
></
i
>
</
span
>
</
button
>
</
div
>
<
div
class
=
"dropdown-menu"
id
=
"dropdown-menu4"
role
=
"menu"
>
<
div
class
=
"dropdown-content"
>
<
a
href
=
"#"
class
=
"dropdown-item"
> Java </
a
>
<
a
href
=
"#"
class
=
"dropdown-item"
> C++ </
a
>
<
a
href
=
"#"
class
=
"dropdown-item"
> Python </
a
>
<
a
href
=
"#"
class
=
"dropdown-item"
> C </
a
>
<
hr
class
=
"dropdown-divider"
/>
<
a
href
=
"#"
class
=
"dropdown-item"
> DSA </
a
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
>
const dropdown =
document.querySelector('.dropdown');
const active =
document.querySelector('.is-active')
document.body.addEventListener('click', function () {
if (active) {
dropdown.classList.remove('is-active')
}
})
dropdown.addEventListener('click', function (event) {
event.stopPropagation();
this.classList.toggle('is-active');
});
</
script
>
</
body
>
</
html
>