Building Navigation Bars in CSS

To build a vertical navigation bar in CSS you need to style the <a> elements.
Ex.
a
{
display:block; //displays the links as a block element
width:50px; //specify the width of the block as 50 px
}

To create Horizontal Navigation Bar in CSS we can either use floating or inline floating list items which keeps the links the same size.
Inline List Items: This is done by specifying the <li> elements as inline.
Ex.
li
{
display:inline;
}


Floating List Items: This is done by adding float inside the <li> elements and then specifying a certain width for all <a> elements:
Ex.
li
{
float:left; // block elements will slide next to each other
}
a
{
display:block;// Displays the links as block elements which makes the entire link area clickable
width:40px; // specifying the width of the links as 40px
}