Horizontal Navigation Menu Bar

In any HTML|HTML5 document horizontal menu bar is representing links to site pages to allow easy navigation, or destinations inside current web page.
Every menu bar in usually build from list items that contains the link to another page using anchor tag.
Most common way to build this kind of menu using <ul><li> and <a> selectors.

Step 1 - Create HTML simple one level menu list

For this example will create simple one level HTML unordered list with anchor links inside.

HTML Code <ul>
<li><a href="#about.html">About</a></li>
<li><a href="/home.html">Home</a></li>
<li><a href="../content.html">Content</a></li>
<li><a href="http://www.blended-menu.com/help.html">Help</a></li>
<ul>

HTML Appearance Result

ul : Unordered List tag defines a list with items that are displayed with a bullet.
li : List Item tag represent an item that should be contained in an ordered list or unordered list.
a : Anchor element tag defines target destination inside HTML document or external hyper-link target.
NOTE : You can specify relative or absolute hyper-link path (URL) or just destination anchor within current document (URI).

Step 2 - Create basic one level menu horizontal CSS code

There are many ways to create CSS|CSS3 for horizontal menu bar, will demonstrate three CSS code examples to get such layout.

CSS Code Example A ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
float: left;
}
a {
display: block;
width: 100px;
text-align: center;
text-decoration: none;
}

CSS Code Example B ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
display: inline-block;
float: left;
width: 100px;
text-align: center;
text-decoration: none;
}

CSS Code Example C ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline;
}
a {
float: left;
width: 100px;
text-align: center;
text-decoration: none;
}

HTML Appearance Result

margin & padding : Are set to zero in order to remove default browser settings.
list-style : Set this shorthand property to remove any default list item markers.
display : This is to specify the rendering box as block to fill all width area.
text-align : Center the content text within the block box.
text-decoration : Remove default underline text formatting decoration.

Step 3 - Add basic CSS decoration to menu bar

This will give the plain text lines more menu alike look.

CSS Decoration Code a {
color: white;
background-color: blue;
font-weight: bold;
text-transform: uppercase;
}
a:hover {
color: blue;
background-color: white;
}

HTML Appearance Result

Step 4 - Combine both HTML & CSS to see it works

Copy and Place this HTML & CSS code inside any plain or new text document file *.txt, rename the file to *.html and open with any browser to test your newly horizontal navigation bar.

<!DOCTYPE html>
<html>
<head>
<style>
/** Convert Unordered List to Horizontal Menu Bar **/
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
float: left;
}
a {
width: 100px;
text-align: center;
text-decoration: none;
}
/** Basic Menu Decoration **/
a {
color: white;
background-color: blue;
font-weight: bold;
text-transform: uppercase;
}
a:hover {
color: blue;
background-color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="#about.html">About</a></li>
<li><a href="/home.html">Home</a></li>
<li><a href="../content.html">Content</a></li>
<li><a href="http://www.blended-menu.com/help.html">Help</a></li>
<ul>
</body>
</html>

NOTE : This is only example, you shouldn't place the CSS code inside HTML.