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>