Menu One - css only, no background images

The HTML

The HTML for this menu can be found on the menu index page.

CSS notes

The CSS for this menu can be found at css menu one.

The width & height will alter the menu background size, change the line-height (highlighted in red) to match the height for vertically aligning the text.

The border-radius will be implemented when CSS3 arrives (most browsers have implemented already), see the W3C CSS3 Backgrounds and Borders Module for details. The -webkit-border-radius is webkit specific (it works in Chrome & Safari), -moz-border-radius is gecko specific (it works in old Firefox versions, Mozilla & Netscape).

Change the #content to whatever your container id is.

Horizontal menu css

/* change the #content to whatever your container id is */
#menu_h li {
float: left;
list-style: none;
margin: 2px;
text-align: center;
}
#content #menu_h li.nav1 a, #content #menu_h li.nav1 a:visited {
display: block;
width: 100px;
height: 20px;
border-radius: 11px;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
background: #f60;
color: #333;
font: bold 12px/20px verdana;
text-decoration: none;
}
#content #menu_h li.nav1 a:hover {
background: #fc2;
}

Vertical menu css

/* change the #content to whatever your container id is */
#menu_v li {
list-style: none;
width: 100px;
margin: 2px;
text-align: center;
}
#content #menu_v li.nav1 a, #content #menu_v li.nav1 a:visited {
display: block;
width: 100px;
height: 20px;
border-radius: 11px;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
background: #8d8;
color: #333;
font: bold 12px/20px verdana;
text-decoration: none;
}
#content #menu_v li.nav1 a:hover {
background: #f7c;
}

Full colour codes used on background and images

The codes below are the full hex codes, the ones used above are the css shorthand versions.

#ff6600 - orange

#88dd88 - green

#ff77cc - pink

#ffcc22 - yellow