7.1

color: #456;
display: block;
float: left;
text-decoration: none;
font-weight: bold;
font-family: sans-serif;
font-size: 1em;
line-height: 25px;
padding: 0 10px;
}
#menu li.selected a
{
/* background-color: <? generateSkinContrastColorHighLight(1.3); ?>; */
background-position: left bottom;
color: #234;
}
#menu a:hover
{
/* background-color: <? generateSkinContrastColorHighLight(0.9); ?>; */
background-position: left bottom;
color: #234;
}
#menu ul
{
display: inline;
list-style: none;
}
#menu li
{
float: left;
margin:0;
padding:0
}
Creating a Tabbed menu
Below is a sample of the Menu bar where the menu items have a tabbed style. To achieve this a repeating background image
is added to the <li> tag. Space is added between the items by adding a right margin. To complete the design border attributes
are set for top, left and right sides of the <li> tag.
The Menu bar with repeated background image
©2010 Objectif Lune Inc - 231 -