<!DOCTYPE html>
<
html
>
<
head
>
<
title
> Foundation CSS Dropdown </
title
>
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
center
>
<
h2
style
=
"color:green;"
> GeeksforGeeks </
h2
>
<
h3
> Foundation CSS Dropdown </
h3
>
<
button
class
=
"button"
type
=
"button"
data-toggle
=
"left-top"
>
Left Top
</
button
>
<
div
class
=
"dropdown-pane"
data-position
=
"left"
data-alignment
=
"top"
id
=
"left-top"
data-dropdown>
<
strong
> GeeksforGeeks </
strong
>
</
div
>
<
button
class
=
"button"
type
=
"button"
data-toggle
=
"right-top"
>
Right Top
</
button
>
<
div
class
=
"dropdown-pane"
data-position
=
"right"
data-alignment
=
"top"
id
=
"right-top"
data-dropdown>
<
strong
> GeeksforGeeks </
strong
>
</
div
><
br
><
br
>
<
button
class
=
"button"
type
=
"button"
data-toggle
=
"left-center"
>
Left Center
</
button
>
<
div
class
=
"dropdown-pane"
data-position
=
"left"
data-alignment
=
"center"
id
=
"left-center"
data-dropdown>
<
strong
> GeeksforGeeks </
strong
>
</
div
>
<
button
class
=
"button"
type
=
"button"
data-toggle
=
"right-center"
>
Right Center
</
button
>
<
div
class
=
"dropdown-pane"
data-position
=
"right"
data-alignment
=
"center"
id
=
"right-center"
data-dropdown>
<
strong
> GeeksforGeeks </
strong
>
</
div
><
br
><
br
>
<
button
class
=
"button"
type
=
"button"
data-toggle
=
"left-bottom"
>
Left Bottom
</
button
>
<
div
class
=
"dropdown-pane"
data-position
=
"left"
data-alignment
=
"bottom"
id
=
"left-bottom"
data-dropdown>
<
strong
> GeeksforGeeks </
strong
>
</
div
>
<
button
class
=
"button"
type
=
"button"
data-toggle
=
"right-bottom"
>
Right Bottom
</
button
>
<
div
class
=
"dropdown-pane"
data-position
=
"right"
data-alignment
=
"bottom"
id
=
"right-bottom"
data-dropdown>
<
strong
> GeeksforGeeks </
strong
>
</
div
>
</
center
>
<
script
>
$(document).ready(function() {
$(document).foundation();
})
</
script
>
</
body
>
</
html
>