<!DOCTYPE html>
<
html
>
<
head
>
<
link
href
=
rel
=
"stylesheet"
/>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
div
class
=
"ui container"
>
<
br
/><
br
/>
<
h2
class
=
"ui header green"
>GeeksforGeeks</
h2
>
<
b
>
<
p
>Semantic UI Dropdown Pointing Type</
p
>
</
b
>
<
hr
><
br
/>
<
strong
> Pointing Dropdowns:</
strong
>
<
br
/><
br
/>
<
center
>
<
div
class
=
"ui bottom left pointing dropdown button"
>
<
span
class
=
"text"
>Dropdown 1</
span
>
<
div
class
=
"menu"
>
<
div
class
=
"header"
>
Bottom Left pointing dropdown
</
div
>
<
div
class
=
"item"
>Option 1</
div
>
<
div
class
=
"item"
>Option 2</
div
>
<
div
class
=
"item"
>Option 3</
div
>
</
div
>
</
div
>
<
div
class
=
"ui bottom pointing dropdown button"
>
<
span
class
=
"text"
>Dropdown 2</
span
>
<
div
class
=
"menu"
>
<
div
class
=
"header"
>
Bottom pointing dropdown
</
div
>
<
div
class
=
"item"
>Option 1</
div
>
<
div
class
=
"item"
>Option 2</
div
>
<
div
class
=
"item"
>Option 3</
div
>
</
div
>
</
div
>
<
div
class="ui bottom right
pointing dropdown button">
<
span
class
=
"text"
>Dropdown 3</
span
>
<
div
class
=
"menu"
>
<
div
class
=
"header"
>
Bottom Right pointing dropdown
</
div
>
<
div
class
=
"item"
>Option 1</
div
>
<
div
class
=
"item"
>Option 2</
div
>
<
div
class
=
"item"
>Option 3</
div
>
</
div
>
</
div
>
<
br
/><
br
/>
<
div
class
=
"ui right pointing dropdown button"
style
=
"margin-right: 65px;"
>
<
span
class
=
"text"
>Dropdown 4</
span
>
<
div
class
=
"menu"
>
<
div
class
=
"header"
>Right pointing dropdown</
div
>
<
div
class
=
"item"
>Option 1</
div
>
<
div
class
=
"item"
>Option 2</
div
>
<
div
class
=
"item"
>Option 3</
div
>
</
div
>
</
div
>
<
div
class
=
"ui left pointing dropdown button"
style
=
"margin-left: 65px;"
>
<
span
class
=
"text"
>Dropdown 5</
span
>
<
div
class
=
"menu"
>
<
div
class
=
"header"
>
Left pointing dropdown
</
div
>
<
div
class
=
"item"
>Option 1</
div
>
<
div
class
=
"item"
>Option 2</
div
>
<
div
class
=
"item"
>Option 3</
div
>
</
div
>
</
div
>
<
br
/><
br
/>
<
div
class
=
"ui top left pointing dropdown button"
>
<
span
class
=
"text"
>Dropdown 6</
span
>
<
div
class
=
"menu"
>
<
div
class
=
"header"
>
Top left pointing dropdown
</
div
>
<
div
class
=
"item"
>Option 1</
div
>
<
div
class
=
"item"
>Option 2</
div
>
<
div
class
=
"item"
>Option 3</
div
>
</
div
>
</
div
>
<
div
class
=
"ui top pointing dropdown button"
>
<
span
class
=
"text"
>Dropdown 7</
span
>
<
div
class
=
"menu"
>
<
div
class
=
"header"
>
Top pointing dropdown</
div
>
<
div
class
=
"item"
>Option 1</
div
>
<
div
class
=
"item"
>Option 2</
div
>
<
div
class
=
"item"
>Option 3</
div
>
</
div
>
</
div
>
<
div
class
=
"ui top right pointing dropdown button"
>
<
span
class
=
"text"
>Dropdown 8</
span
>
<
div
class
=
"menu"
>
<
div
class
=
"header"
>
Top Right pointing dropdown
</
div
>
<
div
class
=
"item"
>Option 1</
div
>
<
div
class
=
"item"
>Option 2</
div
>
<
div
class
=
"item"
>Option 3</
div
>
</
div
>
</
div
>
</
center
>
<
script
>
$('.ui.dropdown').dropdown();
</
script
>
</
div
>
</
body
>
</
html
>