Jamie Lomas

resources navigation

round corner css menu

CSS round corner menu is a simple untitled list menu built with simplisity im mind.

Using just one image, css and a little html implementing and updating this menu couldnt be easyer.

demo

css

#nav {
height:29px;
list-style:none;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
font-weight:700;
margin:0;
padding:0;
}

#nav li {
float:left;
margin:0 1px 0 0;
}

#nav a {
background:#bdf url(images/tab.png);
color:#008;
display:block;
float:left;
height:29px;
padding-left:10px;
text-decoration:none;
}

#nav a:hover {
background-color:#3af;
background-position:0 -124px;
}

#nav a:hover span {
background-position:100% -124px;
}

#nav li.current a {
background-color:#48f;
background-position:0 -62px;
color:#fff;
font-weight:700;
}

#nav li.current span {
background-position:100% -62px;
}

#nav span {
background:url(images/tab.png) 100% 0;
display:block;
line-height:29px;
padding-right:10px;
}

html

images



Download Psd