Creating a simple horizontal navigation bar

Many website owners prefer to go for horizontal menu bars as opposed to the vertical ones. One of the reasons is that it allows users to easily access the information in their website as the menu appears in one single line and can be placed at the top of the page.

So how do we create one?

Step 1
First of all, we are going to create a menu using HTML list.

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="me.html">Me</a></li>
</ul>

Step 2
If we simply leave the coding like that, bullets would appear on the left side of each item in the list, after all, we are building a list. So to remove the bullets, add this CSS codes:

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

Step 3
Next, we want the items in the list to be arranged next to each other instead of one item on each line. So we remove the line breaks by setting the display to inline:

li {
display: inline;
}

Alternatively, if you want the length of each block is adjusted according to the length of the text, use the following code instead:

li {
float: left;
}
a {
display: block;
width: 100px;
}

Setting the display as block allows the area around an item to be clickable. By specifying the width, the block elements will not take up the whole width. Floating the block elements to the left allows the items to slide next to each other.

Save your file and test it out.