<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>Foundation CSS Drilldown Menu</
title
>
<
link
rel
=
"stylesheet"
href
=
crossorigin
=
"anonymous"
>
<
script
src
=
</
script
>
<
script
src
=
crossorigin
=
"anonymous"
>
</
script
>
</
head
>
<
body
style
=
"padding:30px;"
width
=
"1100px"
>
<
h1
style
=
"color:green;"
>
GeeksforGeeks
</
h1
>
<
strong
>Foundation CSS ScrollTop Drilldown Menu</
strong
><
br
/><
br
/>
<
div
class
=
"row"
>
<
div
class
=
"columns"
>
<
ul
class
=
"vertical menu drilldown"
data-drilldown
data-scroll-top
=
"true"
>
<
li
><
a
href
=
"#"
>GFG</
a
></
li
>
<
li
><
a
href
=
"#"
>GFG</
a
></
li
>
<
li
><
a
href
=
"#"
>GFG</
a
></
li
>
<
li
><
a
href
=
"#"
>GFG</
a
></
li
>
<
li
><
a
href
=
"#"
>GFG</
a
></
li
>
<
li
><
a
href
=
"#"
>GFG</
a
></
li
>
<
li
> <
a
href
=
"#"
>GFG</
a
>
<
ul
class
=
"vertical menu"
>
<
li
><
a
href
=
"#"
>GFG</
a
></
li
>
<
li
><
a
href
=
"#"
>GFG</
a
></
li
>
<
li
><
a
href
=
"#"
>GFG</
a
></
li
>
<
li
><
a
href
=
"#"
>GFG</
a
></
li
>
<
li
><
a
href
=
"#"
>GFG</
a
></
li
>
<
li
><
a
href
=
"#"
>GFG</
a
></
li
>
<
li
><
a
href
=
"#"
>GFG</
a
></
li
>
<
li
><
a
href
=
"#"
>GFG</
a
></
li
>
<
li
><
a
href
=
"#"
>GFG</
a
></
li
>
<
li
><
a
href
=
"#"
>GFG</
a
></
li
>
<
li
><
a
href
=
"#"
>GFG</
a
></
li
>
<
li
><
a
href
=
"#"
>GFG</
a
></
li
>
<
li
><
a
href
=
"#"
>GFG</
a
></
li
>
<
li
><
a
href
=
"#"
>GFG</
a
>
<
ul
class
=
"vertical menu"
>
<
li
><
a
href
=
"#"
>GFG</
a
></
li
>
</
ul
>
</
li
>
</
ul
>
</
li
>
<
li
><
a
href
=
"#"
>GFG</
a
></
li
>
</
ul
>
</
div
>
</
div
>
<
script
>
$(document).foundation();
</
script
>
</
body
>
</
html
>