<!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"
/>
<
title
>Foundation Dropdowns</
title
>
<
link
rel
=
"stylesheet"
href
=
crossorigin
=
"anonymous"
>
<
script
src
=
</
script
>
<
script
src
=
crossorigin
=
"anonymous"
>
</
script
>
</
head
>
<
body
>
<
h1
style
=
"color:green;"
>GeeksforGeeks </
h1
>
<
h3
>Foundation CSS vertical Dropdown Menu</
h3
>
<
ul
class
=
"vertical dropdown menu"
data-dropdown-menu
style
=
"max-width:250px;"
>
<
li
>
<
a
href
=
"#"
>Tutorials</
a
>
<
ul
class
=
"vertical menu nested"
>
<
li
><
a
href
=
"#"
>Practice DS & Algo.</
a
></
li
>
<
li
><
a
href
=
"#"
>Algorithms</
a
></
li
>
<
li
><
a
href
=
"#"
>Data Structures</
a
></
li
>
<
li
><
a
href
=
"#"
>Interview Corner</
a
></
li
>
<
li
><
a
href
=
"#"
>Languages</
a
></
li
>
<
li
><
a
href
=
"#"
>CS Subjects</
a
></
li
>
<
li
><
a
href
=
"#"
>GATE</
a
></
li
>
<
li
><
a
href
=
"#"
>Web Technologies</
a
></
li
>
</
ul
>
</
li
>
<
li
><
a
href
=
"#"
>Student</
a
>
<
ul
class
=
"vertical menu nested"
>
<
li
><
a
href
=
"#"
>Campus Ambassador Program</
a
></
li
>
<
li
><
a
href
=
"#"
>School Ambassador Program</
a
></
li
>
<
li
><
a
href
=
"#"
>Project</
a
></
li
>
<
li
><
a
href
=
"#"
>Geek Of the Month</
a
></
li
>
<
li
><
a
href
=
"#"
>Placement Course</
a
></
li
>
<
li
><
a
href
=
"#"
>Competitive Programming</
a
></
li
>
<
li
><
a
href
=
"#"
>Testimonials</
a
></
li
>
<
li
><
a
href
=
"#"
>Careers</
a
></
li
>
</
ul
>
</
li
>
<
li
><
a
href
=
"#"
>Jobs</
a
>
<
ul
class
=
"vertical menu nested"
>
<
li
><
a
href
=
"#"
>Apply for Jobs</
a
></
li
>
<
li
><
a
href
=
"#"
>Post a Job</
a
></
li
>
</
ul
>
</
li
>
<
li
><
a
href
=
"#"
>Courses</
a
></
li
>
</
ul
>
<
script
>
$(document).foundation();
</
script
>
</
body
>
</
html
>