<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
"stylesheet"
href
=
<
script
type
=
"text/javascript"
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
class
=
"container"
>
<
br
/>
<
h2
class
=
"green-text"
>GeeksforGeeks</
h2
>
<
h3
class
=
"blue-grey-text"
>
Materialize badge classes
</
h3
>
<
ul
id
=
"dropdownId"
class
=
"dropdown-content"
>
<
li
>
<
a
href
=
"#"
>Checked<
span
class
=
"card badge"
>89+</
span
>
</
a
>
</
li
>
<
li
>
<
a
href
=
"#!"
>Unchecked
<
span
class
=
"card new badge blue"
>20</
span
>
</
a
>
</
li
>
<
li
><
a
href
=
"#"
class
=
"card badge"
>Spam</
a
></
li
>
<
li
class
=
"divider"
></
li
>
<
li
><
a
href
=
"#"
>Junk<
span
class
=
"badge"
>14</
span
></
a
>
</
li
>
</
ul
>
<
a
class
=
"btn dropdown-button"
href
=
"#"
data-activates
=
"dropdownId"
>
My mails
<
i
class
=
"mdi-navigation-arrow-drop-down right"
></
i
>
</
a
>
<
script
>
$('.dropdown-button').dropdown({
inDuration: 250,// Enter transition in ms
outDuration: 250,// Out transition in ms
constraintWidth: true,// Width takes size of activator
hover: true, // Activate on hover
belowOrigin: true, //Dropdown is below activator
alignment: 'right'
});
</
script
>
</
body
>
</
html
>