18-CSS Navigation Bar


Here you will study about the CSS Navigation Bar which you almost see on every web page nowadays.It is actually the bars where all the important details are provided by the just name of the topic in a horizontal or vertical manner.

Two types of bar are:

Horizontal Bar

Vertical Bar


I have presented the codes for both types of bars.

Example of Vertical Bar:



li a:hover:not(.active) { background-color: yellow; color: white; }

Vertical Navigation Bar

Below is the vertical bar presented with the local links .


Example of Horizontal Bar:



Facebook Comments
Previous article17-CSS Multi-Background Property
Next article19-CSS Rounded Corners
Hello Itsourcecoders, welcome to itsourcecode.com. I'm Joken Villanueva, MIT a passionate Blogger, Programmer and a Hobbyist. I started Itsourcecode because I wanted to give back and Share all the learnings and knowledge I've learned in my career and I believe through this website I would be able to help and assist those newbie programmers in enhancing their skills from different programming languages. So let us all help each other by sharing our ideas!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.