Creating Tabbed Menu (Part 3)
This tutorial are tested with Internet Explorer 7 and Firefox 2 on the PC.

To make the menu display horizontally, lwe need to change the <li> style to inline: 

li.menu3 
{
  list-style-type: none;
  display: inline;	
  padding: 0px;
}
However, recall that in the previous section we set the <a> element to use block level display. This will break the inline style, so let's remove that for now. 
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;
  line-height:23px;
  font-size:10px;
  color:#003366;
  text-decoration:none;	
}


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

Result it like this (this is because the <a> alement no longer follows the width and height specified).
Screenshot:

Result on your browser:

In the next section, we will see how to fix this, but for those who don't care about using background images, we can remove the image (using the modified style below) and the result could be good enough. 

li.menu3 {
  list-style-type: none;
  padding: 0px;	
  display: inline;	
}


a.menu3 {
  padding: 10px;
  background-color:#6699CC;
  text-align:center;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#003366;
  text-decoration:none;	
}


a.menu3:hover{
  background-color:#2299CC;
  color:#FFFFFF;	
}
<< Previous Page>>
<< Next Page>>
<< More Tutorials>>