CSS

Creating CSS Only Horizontal Navigation

It’s best to provide these links as a HTML list and style the list items to create the look for your menu. In terms of SEO having a pure CSS drop down can be very beneficial because it removes the need for the browser to use Javascript.

There are many features you can use in CSS to create great looking navigation menus, in this tutorial the look will be very simple but I will show you the CSS needed to create the drop down menus on mouse hover of the list items.

For this tutorial all you need is a basic knowledge of HTML and CSS.

Setup HTML for Navigation

First you need to setup the HTML for your navigation this should be the main categories of your website and there sub-categories if any. I will go over the importance of selecting the right categories in a later post.

Below is an example of the typical HTML navigation structure.

<ul id=nav>
     <li><a href="">Home</a></li>
     <li><a href="">About</a></li>
     <li><a href="">Portfolio</a>
     <ul>
          <li><a href="">Website 1</a></li>
          <li><a href="">Website 2</a></li>
          <li><a href="">Website 3</a></li>
          <li><a href="">Website 4</a></li>
          <li><a href="">Website 5</a></li>
     </ul>
     </li>
     <li><a href="">Services</a>
     <ul>
          <li><a href="">Website Design</a>
          <ul>
               <li><a href="">HTML</a></li>
               <li><a href="">CSS</a></li>
          </ul>
          </li>
          <li><a href="">Website Development</a>
          <ul>
               <li><a href="">PHP</a></li>
               <li><a href="">.Net</a></li>
               <li><a href="">JavaScript</a></li>
               <li><a href="">jQuery</a></li>
          </ul>
          </li>
          <li><a href="">SEO</a></li>
          <li><a href="">Advertising</a></li>
          <li><a href="">Marketing</a></li>
     </ul>
     </li>
     <li><a href="">Contact</a></li>
</ul>

Looking at this navigation it has 5 main categories home, about, portfolio, services and contact. Portfolio has a sub category this is done by using a list within a list:

<li><a href="">Portfolio</a>
     <ul>
          <li><a href="">Website 1</a></li>
          <li><a href="">Website 2</a></li>
          <li><a href="">Website 3</a></li>
          <li><a href="">Website 4</a></li>
          <li><a href="">Website 5</a></li>
     </ul>
</li>

The services category has a sub-sub-category which is done by using a list within a list within a list.

<li><a href="">Services</a>
     <ul>
          <li><a href="">Website Design</a>
          <ul>
               <li><a href="">HTML</a></li>
               <li><a href="">CSS</a></li>
          </ul>
          </li>
          <li><a href="">Website Development</a>
          <ul>
               <li><a href="">PHP</a></li>
               <li><a href="">.Net</a></li>
               <li><a href="">JavaScript</a></li>
               <li><a href="">jQuery</a></li>
          </ul>
          </li>
          <li><a href="">SEO</a></li>
          <li><a href="">Advertising</a></li>
          <li><a href="">Marketing</a></li>
     </ul>
</li>

Style Navigation bar

Now that the HTML for the list is complete now we can start adding the CSS to turn the list into a navigation menu.

List

First style the main list remove the bullet point style and add a background colour and a height to the list.

ul {
     padding:0;
     margin:0;
     list-style: none;
     background:#000;
     height:36px;
}

Next style the list items and add a float left to make the list horizontal.

ul li {
     float:left;
     position:relative;
}

As the list items are all links we need to style this by using the link selector, removing the underline and change the colour of the links.

a:link, a:visited {
     text-decoration: none;
     color: #FFF;
     font-weight:bold;
}

Now make sure that the link area takes up the entire area of the list item apply the following style.

ul li a, ul li a:visited {
     display:block;
     color:#fff;
     width:104px;
     height:auto;
     line-height:20px;
     padding:10px;
     text-align:center;
}

Next we need to style how the links will look on mouse hover we are going to revert the colour of the text and the background by applying the following style.

ul li a:hover {
     display:block;
     color:#000;
     background:#FFF;
     line-height:20px;
     padding:10px;
}

That completes the main list now we need to apply the style to the sub-lists and the sub-sub-lists we also need these to be displayed on the hover event so again we will use the :hover selector.

Start off by hiding the sub-list and sub-sub-list.

ul li ul, ul li:hover ul li ul {
     display: none;
}

Now we can use the :hover selector to display the sub-list when the mouse hovers over the list item done with the following style.

ul li:hover ul {
     display:block;
     position:absolute; 
     top:36px;
     left:0;
     height:auto;
}

This has a relative position and a top and left positions to make sure it lines up correctly with the list item.

Next apply a style to the list items so we can separate them with a border line.

ul li:hover ul li a {
     display:block;
     text-align:left; 
     border-bottom:1px solid #FFF;
}

Finally display the sub-sub-list on hover of the sub-list list item by applying the following style.

ul li:hover ul li:hover ul {
     display:block;
     position:absolute;
     left:124px;
     top:0;
}

View the final result at this pure CSS navigation demo

Back to top