It will be nice to use image background instead of a solid color. This can be accomplished by setting the background-image property. We also want to swap the image (to show highlight) when the mouse is over the link. To do this, assign the background image to the <a> tag. (Iif we assign it to the <li> tag, then will need to use JavaScript to swap the image.)

Here are the two images, one for normal stage, the other for highlight state:

li.menu {
  list-style-type: none;
  padding: 10px;	
}


a.menu{
  background-image: url(images/tabSideway.png);
  color:#FFFFFF;	
  padding: 10px;
}


a.menu:hover{
  background-image: url(images/tabSidewayHighlight.png);
  color:#000000;	
}

• Menu Item 1
• Menu Item 2
• Menu Item 3
• Menu Item 4

The problem is the dimensions, we need to make them the same dimensions as the image, which so happen to be 139px x 23p. In the following, we make modifications by setting the width and height property of the <a> tag, removing the padding (padding: 0px), and alighning the text to the center (text-align:center). We also assigned the font (font-size:10px and font-family:Arial, Helvetica, sans-serif, so that we won't be using a font that won't fit into the image) and removed the text underline (text-decoration:none).

li.menu2 {
	list-style-type: none;
	padding: 0px;	
}


a.menu2 {
  background-image: url(images/tabSideway.png);
  padding: 0px;
  display: block;
  width:139px;
  height:23px;
  text-align:center;
  font-family:Arial, Helvetica, sans-serif;
  font-size:10px;
  color:#003366;
  text-decoration:none;	
}

a.menu2:hover{
  background-image: url(images/tabSidewayHighlight.png);
  color:#FFFFFF;	
}

The result like shown on the left. One more thing to note here is the line line-height:23px. This is used to align the text vertically and the value is set to match the height of the image (the expected way of using vertical-align: middle does not work in this case).

The line display: block is important because this forces the a<> which is an inline element to use the width and height attribute. Without it, the result is like this:

Download the .css
Simple example page.

Next, we well see how to modify this menu to appear horizontally.