Skip to main content

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;
}

Popular posts from this blog

eLitmus pH test for freshers

eLitmus has became more famous in conducting pH test for the fresh graduates in India. They will evaluate candidates across India and to provide a standard benchmark against which companies can compare them.


Who can apply

Candidates having/pursuing a degree in BE/B.Tech, MCA, ME/M.Tech or M.Sc(CS/IT) can apply for the pH test.

Companies recruiting from pH test

List of companies

Look at test centers

Check the upcoming pH tests

Look at the testimonials

Read what the candidates appeared for this exam says about eLitmus.

Test Pattern

Test duration : 2 hours
No of questions : 60

It will be asked from 3 categories,

Syllabus

20 : Problem solving
20 : Verbal ( You need to read the paragraph and answer the questions )
20 : Quantitative ( Data interpretation )

Four options will be provided for each question. Test will be conducted online.

Payment methods

Fresh graduates appearing for the test has to pay Rs 920/- as a test fee.

They can pay online or send a DD or in cash at Bangalore eLitmus office.

By Online: If y…