How to create a simple horizontal navigation menu from scratch

I have already done the Fading Navigation Menu tutorial, however it is a bit advanced for a beginner. This simple navigation menu tutorial will help you create a very basic horizontal navigation menu using semantic HTML and minimal CSS. You will need to know basic CSS properties and how CSS selectors work to understand the tutorial.

Let’s get started.

Step 1 – The HTML

<ul>
	<li>Blog</li>
	<li>Contact</li>
	<li>Freebies</li>
	<li>Tutorials</li>
</ul>

If the above HTML code is all you have on your page, then it should look like this:
Step 1
The next thing to do is to add the <a> links, which will link to the specified pages.

<ul>
	<li><a href="#">Blog</a></li>
	<li><a href="#">Contact</a></li>
	<li><a href="#">Freebies</a></li>
	<li><a href="#">Tutorials</a></li>
</ul>

Your page should now look like this:
Step 2
That is all the HTML we are going to need.
What we have is an Unordered List <ul> which contains List Items <li>, which contains an Anchor link <a>. Our menu needs no more HTML-markup.

Step 2 – The CSS

The first thing we want to do is:

  • Add a margin and padding reset, always use some kind of CSS reset.
  • Move the Unordered List away from the edge with a margin – with ‘margin: 20px 10px’
  • Force the List Items to be horizontal – with ‘float: left’
  • Get rid of those pesky black dots – with ‘list-style-type: none’

So let’s add this to the CSS. (95% of the time I organise my properties in alphabetical order)

* { margin: 0; padding: 0; }
ul { margin: 20px 10px; }
ul li { float: left; list-style-type: none; }

Step 3
Next, what we want to achieve is:

  • Get rid of the underline – with ‘text-decoration: none’
  • Add some padding to give the buttons volume – with ‘padding: 10px 20px’
  • Add a background colour – with ‘background: #004b98′
  • Add a font colour – with ‘color: white’
  • Change the display to ‘block’ so that the entire <a> is clickable, not just the text (It seems like this only needed for IE6 and IE7)- with ‘display: block’
  • Change the type of font used – with ‘font-family: Arial, Helvetica, sans-serif’
  • Add a hover state
* { margin: 0; padding: 0; }
ul { margin: 20px 10px; }
ul li { float: left; list-style-type: none; }
ul li a { background: #004b98; color: white; display: block; font-family: Arial, Helvetica, sans-serif; padding: 10px 20px; text-decoration: none; }
ul li a:hover { background: #0069d4; }

Simple Navigation Menu
And there you have your own very simple horizontal navigation menu.

Any questions or comments?

  1. Pingback: How to Create a Fancy CSS3 Menu | CSS-Plus

  2. ben says:

    beautiful thank you

  3. Peter says:

    Great work!
    This worked wonderfully for me. I have two quick questions.
    a) If I were to want the blue bar to continue out the whole width of the page, how would I make that happen?
    b) I notice yours automatically resizes when I resize the window. That is awesome, I can’t seem to get mine to behave that way. Is it css for the whole page, or did I miss something in your tags for this section?
    Cheers!

    1. Shane B says:

      On point a) you could probably just add background: #004b98; to the ul style tags and no one would be the wiser.

  4. MattB says:

    But how do you center this navigation bar on the page? Can you show me the code? Great tutorial. Thanks

    1. Jamy Golden says:

      If you add this to the CSS it should work correctly:

      ul { display: table; margin: 0 auto; }

      Supported by IE8+

  5. Efren Castillo says:

    Thanks so much Jamy!

  6. Really simple and useful, Thank you, but the demo link in the circle at the last of your post was awesome, I was wondering of how did you make this circle link, finally I got it
    border-radius: 40px 40px 40px 40px;
    I like it, thanks again.

  7. sivasai says:

    If i want to navigate when i select contact ? I dont want to move to another page i want to show a panel..How can i do that?

  8. Graham says:

    This literally saved my sanity!!! Thanks man!