<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
/>
<
meta
name
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
.0" />
<
title
>Primer CSS Dropdown</
title
>
<
link
rel
=
"stylesheet"
href
=
</
head
>
<
body
>
<
div
class
=
"m-4 pt-4"
style
=
"text-align: center;"
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
<
h2
>
Primer CSS Dropdown
</
h2
>
</
div
>
<
div
class
=
"container-lg clearfix"
>
<
div
class
=
"col-4 float-left p-4"
>
<
h3
> .ne option </
h3
>
<
div
class
=
"m-4"
>
<
details
class="dropdown details-reset
details-overlay d-inline-block">
<
summary
class
=
"btn"
aria-haspopup
=
"true"
> Jobs
<
div
class
=
"dropdown-caret"
></
div
>
</
summary
>
<
ul
class
=
"dropdown-menu dropdown-menu-ne"
>
<
li
>
<
a
class
=
"dropdown-item"
href
=
"#"
>
Apply for job
</
a
>
</
li
>
<
li
>
<
a
class
=
"dropdown-item"
href
=
"#"
>
Post a job
</
a
>
</
li
>
<
li
>
<
a
class
=
"dropdown-item"
href
=
"#"
>
JOB-A-THON
</
a
>
</
li
>
</
ul
>
</
details
>
</
div
>
</
div
>
<
div
class
=
"col-4 float-left p-4"
>
<
h3
> .e option </
h3
>
<
div
class
=
"m-4"
>
<
details
class="dropdown details-reset
details-overlay d-inline-block">
<
summary
class
=
"btn"
aria-haspopup
=
"true"
> Courses
<
div
class
=
"dropdown-caret"
></
div
>
</
summary
>
<
ul
class
=
"dropdown-menu dropdown-menu-e"
>
<
li
>
<
a
class
=
"dropdown-item"
href
=
"#"
>
Java Fork
</
a
>
</
li
>
<
li
>
<
a
class
=
"dropdown-item"
href
=
"#"
>
Python advanced
</
a
>
</
li
>
<
li
>
<
a
class
=
"dropdown-item"
href
=
"#"
>
DSA fork
</
a
>
</
li
>
</
ul
>
</
details
>
</
div
>
</
div
>
<
div
class
=
"col-4 float-left p-4"
>
<
h3
> .se option </
h3
>
<
div
class
=
"m-4"
>
<
details
class="dropdown details-reset
details-overlay d-inline-block">
<
summary
class
=
"btn"
aria-haspopup
=
"true"
> Tutorials
<
div
class
=
"dropdown-caret"
></
div
>
</
summary
>
<
ul
class
=
"dropdown-menu dropdown-menu-se"
>
<
li
>
<
a
class
=
"dropdown-item"
href
=
"#"
>
DSA
</
a
>
</
li
>
<
li
>
<
a
class
=
"dropdown-item"
href
=
"#"
>
CSS
</
a
>
</
li
>
<
li
>
<
a
class
=
"dropdown-item"
href
=
"#"
>
HTML
</
a
>
</
li
>
</
ul
>
</
details
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"container-lg clearfix"
>
<
div
class
=
"col-4 float-left p-4"
>
<
h3
> .s option </
h3
>
<
div
class
=
"m-4"
>
<
details
class="dropdown details-reset
details-overlay d-inline-block">
<
summary
class
=
"btn"
aria-haspopup
=
"true"
> Jobs
<
div
class
=
"dropdown-caret"
></
div
>
</
summary
>
<
ul
class
=
"dropdown-menu dropdown-menu-s"
>
<
li
>
<
a
class
=
"dropdown-item"
href
=
"#"
>
Apply for job
</
a
>
</
li
>
<
li
>
<
a
class
=
"dropdown-item"
href
=
"#"
>
Post a job
</
a
>
</
li
>
<
li
>
<
a
class
=
"dropdown-item"
href
=
"#"
>
JOB-A-THON
</
a
>
</
li
>
</
ul
>
</
details
>
</
div
>
</
div
>
<
div
class
=
"col-4 float-left p-4"
>
<
h3
> .sw option </
h3
>
<
div
class
=
"m-4"
>
<
details
class="dropdown details-reset
details-overlay d-inline-block">
<
summary
class
=
"btn"
aria-haspopup
=
"true"
> Courses
<
div
class
=
"dropdown-caret"
></
div
>
</
summary
>
<
ul
class
=
"dropdown-menu dropdown-menu-sw"
>
<
li
>
<
a
class
=
"dropdown-item"
href
=
"#"
>
Java Fork
</
a
>
</
li
>
<
li
>
<
a
class
=
"dropdown-item"
href
=
"#"
>
Python advanced
</
a
>
</
li
>
<
li
>
<
a
class
=
"dropdown-item"
href
=
"#"
>
DSA fork
</
a
>
</
li
>
</
ul
>
</
details
>
</
div
>
</
div
>
<
div
class
=
"col-4 float-left p-4"
>
<
h3
> .w option </
h3
>
<
div
class
=
"m-4"
>
<
details
class="dropdown details-reset
details-overlay d-inline-block">
<
summary
class
=
"btn"
aria-haspopup
=
"true"
> Tutorials
<
div
class
=
"dropdown-caret"
></
div
>
</
summary
>
<
ul
class
=
"dropdown-menu dropdown-menu-w"
>
<
li
>
<
a
class
=
"dropdown-item"
href
=
"#"
>
DSA
</
a
>
</
li
>
<
li
>
<
a
class
=
"dropdown-item"
href
=
"#"
>
CSS
</
a
>
</
li
>
<
li
>
<
a
class
=
"dropdown-item"
href
=
"#"
>
HTML
</
a
>
</
li
>
</
ul
>
</
details
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>