Turn your HTML list into a navigation bar with CSS

Posted by Fahad Ibnay Heylaal on Sep 13th 2008, 15:33 - in CSS

Its not too difficult if you know about css floats. Assuming you already have your menu in an unordered list, we can create a navigation bar using css only.

HTML (the list)

  1.  
  2. <div id="nav">
  3.   <ul>
  4.     <li><a href="#">Home</a></li>
  5.     <li><a href="#">Blog</a></li>
  6.     <li><a href="#">About</a></li>
  7.     <li><a href="#">Contact</a></li>
  8.   </ul>
  9. </div>

After adding some CSS to it, our navigation bar will look like this:

CSS

First of all, we need to set the value of margin and padding to 0 for our list.

  1. #nav ul {
  2.   margin: 0px;
  3.   padding: 0px;
  4. }

We dont want bullets for this list. Therefore, we have to set list-style property to none.

  1. #nav ul {
  2.   margin: 0px;
  3.   padding: 0px;
  4.   list-style: none; /* new property added */
  5. }

Right now, it will appear as a vertical list. since we want a horizontal navigation bar, we will have to display each element of the list as blocks, and float them to left.

  1. #nav ul li,
  2. #nav ul li a {
  3.   float: left;
  4.   display: block;
  5. }

Lets style if up a bit more (up to you now) by adding some hover effects and background colour.

  1. #nav ul li a {
  2.   padding: 20px;
  3.   font-family: arial;
  4.   font-size: 24px;
  5.   background-color: #eee;
  6.   color: #000;
  7. }
  8.  
  9. #nav ul li a:hover {
  10.   background-color: #ccc;
  11. }

Done! Open your web page in a browser, and you should see a navigation bar just like the image above.

Share: