Want to become a Vibe Coder? Join Vibe Coding Training here
x
C# Corner
Tech
News
Videos
Forums
Jobs
Books
Events
More
Interviews
Live
Learn
Training
Career
Members
Blogs
Challenges
Certification
Contribute
Article
Blog
Video
Ebook
Interview Question
Collapse
Feed
Dashboard
Wallet
Learn
Achievements
Network
Refer
Rewards
SharpGPT
Premium
Contribute
Article
Blog
Video
Ebook
Interview Question
Register
Login
Vertical Menu Using CSS
WhatsApp
Sudhir Choudhary
5y
44.1k
0
0
100
Article
Take the challenge
vetical.zip
Introduction
In this article, you will learn how to create a Vertical Menu Bar using CSS.
In this article, only CSS is used. Also, onMouseHover shows the Sub Menu.
The following code can be used to create a Vertical Menu Bar:
<!doctype html
>
<
html
>
<
head
>
<
title
>
vertical menu
</
title
>
<
style
>
*
{
margin: 0px;
padding: 0px;
}
body
{
background: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: lighter;
text-transform: capitalize;
color: #FFFFFF;
}
#main
{
width: 90%;
height: 500px;
margin: 0px auto;
}
#menubox
{
width: 100%;
}
.menu ul
{
width: 200px;
background: #6633FF;
}
.menu ul li
{
list-style: none;
position: relative;
}
.menu ul li a
{
text-decoration: none;
padding: 14px 30px 14px 30px;
color: #fff;
display: block;
border-bottom: 1px solid #fff;
}
.menu ul li ul
{
display: none;
}
.menu ul li:hover ul
{
position: absolute;
left: 180px;
top: -47px;
display: block;
background: #0033CC;
}
.menu ul li ul li
{
position: relative;
}
.menu ul li:hover
{
background: #0033CC;
color: #FFFFFF;
}
.menu ul li:hover ul li ul
{
display: none;
}
.menu ul li ul li:hover, .menu ul li ul li a:hover
{
background: #003366;
}
.menu ul li ul li ul
{
display: block;
}
.menu ul li ul li:hover ul
{
position: absolute;
left: 180px;
top: -40px;
display: block;
background: #003366;
}
.menu ul li ul li ul li:hover, .menu ul li ul li ul li a:hover
{
background: #0033CC;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"main"
>
<
div
id
=
"menubox"
>
<
div
class
=
"menu"
>
<
ul
>
<
li
>
<
a
href
=
"#"
>
home
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
>
about Us
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
>
service
</
a
>
<
ul
>
<
li
>
<
a
href
=
"#"
>
service
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
>
service
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
>
service
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
>
service
</
a
>
<
ul
>
<
li
>
<
a
href
=
"#"
>
service
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
>
service
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
>
service
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
>
service
</
a
>
</
li
>
</
ul
>
</
li
>
</
ul
>
</
li
>
<
li
>
<
a
href
=
"#"
>
Blog
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
>
catagory
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
>
contect Us
</
a
>
</
li
>
</
ul
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
CSS menu bar
menu
menu in HTML
vertical Menu
People also reading
Membership not found