Search This Blog

How to create vertical navigation bar using HTML5 and CSS3?

Follow the below steps and create a beautiful sidebar for your website.

1. Create the simple list.

<div id="vl">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Our Vision</a></li>
<li><a href="#">Contact No</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
2. Remove the styles, margins and paddings. 
#vl ul { 
list-style-type: none; 
margin:0;
padding:0;
}
3. Add the CSS property block, background color. 
#vl a { 
display: block;
color: #FF0000;
background-color: #f0f0f0;
}
4. Set the width of list. 
#vl a { 
display: block;
color: #FF0000;
background-color: #f0f0f0;
width:200px;
}
5. Add the hover color. 
#vl a:hover { 
background-color: #ffff00;
color :white;
}
6. Give some padding and margins to make neater. 
#vl a { 
margin:2px;
padding:10px;
}