7.0

Table Of Contents

#menu a

{

/* background-color: <? generateSkinContrastColorHighLight(1); ?>; */

background: #D9E1E5 url('images/nav_bg.gif');

border-right: 1px solid #AFBEC7;

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

}

4.5.2 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

Styling - Menu bar