<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>Pure CSS Vertical Menu</
title
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
/>
<
link
rel
=
"stylesheet"
href
=
<
style
>
.pure-menu-heading {
color: #308d46;
}
.custom-display {
/* To limit the menu width to
the content of the menu: */
display: inline-block;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
" pure-menu custom-display"
>
<
ul
class
=
"pure-menu-list"
>
<
li
class
=
"pure-menu-heading"
>
GeeksforGeeks
</
li
>
<
li
class="pure-menu-item
pure-menu-has-children
pure-menu-allow-hover">
<
a
href
=
"#"
class
=
"pure-menu-link"
>
Tutorials
</
a
>
<
ul
class
=
"pure-menu-children"
>
<
li
class
=
"pure-menu-item"
>
<
a
href
=
"#"
class
=
"pure-menu-link"
>
Data Structures and Algorithms
</
a
>
</
li
>
<
li
class
=
"pure-menu-item"
>
<
a
href
=
"#"
class
=
"pure-menu-link"
>
GATE 2022
</
a
>
</
li
>
<
li
class="pure-menu-item
pure-menu-has-children
pure-menu-allow-hover">
<
a
href
=
"#"
class
=
"pure-menu-link"
>
Practice
</
a
>
<
ul
class
=
"pure-menu-children"
>
<
li
class
=
"pure-menu-item"
>
<
a
href
=
"#"
class
=
"pure-menu-link"
>
HTML
</
a
>
</
li
>
<
li
class
=
"pure-menu-item"
>
<
a
href
=
"#"
class
=
"pure-menu-link"
>
CSS
</
a
>
</
li
>
<
li
class
=
"pure-menu-item"
>
<
a
href
=
"#"
class
=
"pure-menu-link"
>
JavaScript
</
a
>
</
li
>
</
ul
>
</
li
>
</
ul
>
</
li
>
<
li
class="pure-menu-item
pure-menu-has-children
pure-menu-allow-hover">
<
a
href
=
"#"
class
=
"pure-menu-link"
>
Students
</
a
>
<
ul
class
=
"pure-menu-children"
>
<
li
class
=
"pure-menu-item"
>
<
a
href
=
"#"
class
=
"pure-menu-link"
>
Competitive Programming
</
a
>
</
li
>
<
li
class
=
"pure-menu-item"
>
<
a
href
=
"#"
class
=
"pure-menu-link"
>
Geeks of the Month
</
a
>
</
li
>
<
li
class
=
"pure-menu-item"
>
<
a
href
=
"#"
class
=
"pure-menu-link"
>
Placement Courses
</
a
>
</
li
>
<
li
class
=
"pure-menu-item"
>
<
a
href
=
"#"
class
=
"pure-menu-link"
>
Internship
</
a
>
</
li
>
</
ul
>
</
li
>
<
li
class="pure-menu-item
pure-menu-has-children
pure-menu-allow-hover">
<
a
href
=
"#"
class
=
"pure-menu-link"
>
Jobs
</
a
>
<
ul
class
=
"pure-menu-children"
>
<
li
class
=
"pure-menu-item"
>
<
a
href
=
"#"
class
=
"pure-menu-link"
>
Apply for Jobs
</
a
>
</
li
>
<
li
class
=
"pure-menu-item"
>
<
a
href
=
"#"
class
=
"pure-menu-link"
>
Post a Jobs
</
a
>
</
li
>
</
ul
>
</
li
>
<
li
class
=
"pure-menu-item"
>
<
a
href
=
"#"
class
=
"pure-menu-link"
>
Courses
</
a
>
</
li
>
</
ul
>
</
div
>
</
body
>
</
html
>