DaBrook.orgLearning Resource for
Web Design and IB ITGS

Horizontal Navigation Bar with CSS

Posted: Tue, March 11, 08

The Example

Here is an example of the type of css horizontal menu this tutorial will produce.

The HTML

The html markup for this menu is pretty simple. It is a basic unordered list nested within a division assigned an id called "navigation." This is what it looks like.


<div id="navigation"> 		
  <ul> 			
    <li><a href="#">Home</a></li> 		    
	<li><a href="#">Contact</a> </li> 		    
	<li><a href="#">More Links</a></li> 		    
	<li><a href="#">Links again</a>  </li> 		
  </ul> 		
</div>

The CSS

The CSS is a bit more complex than HTML. The first step is ensuring that we have two background images to use - on for the normal state and one for the hover state.

Here are the two images that are used in this example.

Image for the normal state
Background Normal State

Image for the hover state
Background Hover State

Here is the entirety of the css code needed to make the menu display. (It was not the intention of this tutorial to specifically explain each step of this horizontal menu.)


#navigation{ 	
	float: left; 	
	clear: left; 	
	width: 800px; 	
	background:  url(images/navigation-normal.jpg) repeat-x; } 

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

#navigation li { 	
	display: inline; 	
	margin: 0; 	
	padding: 0; 
} 

#navigation li a:link, #navigation li a:visited { 	
	float: left; 	
	background:  url(images/navigation-normal.jpg) repeat-x; 	
	padding: 10px; 	color: #fff; 	
	font-weight: bold; 	
	text-decoration: none; 
} 

#navigation li a:hover { 	
	background:  url(images/navigation-hover.jpg) repeat-x; 	
	color: #000; 
	}

Final Product

Here is what the final product looks like (with the addition of a header).

<< Go Back to Web Design Main Page