Menus / Boxes / Logos

Pure-css menu with button-like items

A horizontal pure-css menu with a focus (outline removed), variable width items. It would have been easier if the inset/outset values were being rendered the same in each browser but they aren't so the solid ones are used instead with proper colours to imitate the effect desired.

You may use it freely for any purpose without seeking my permission.
A link back to would be greatly appreciated.

<ul id="menudemo02">
<li><a href="#">menu link 1</a></li>
<li><a href="#">menu link 2</a></li>
<li><a href="#">menu link 3</a></li>
<li><a href="#">menu link 4</a></li>
<li><a href="#">menu link 5</a></li>
</ul>

#menudemo02 {
list-style: none;
margin: 0;
padding: 4px 2px;
line-height: 100%;
background: #ccc;
height: 100%;
overflow: hidden;
clear: both;
}
#menudemo02 li {
float: left;
margin: 0 1px;
border: 1px solid;
border-color: #666 #fff #fff #666;
padding: 1px;
}
#menudemo02 a {
display: block;
padding: 2px;
background: #fff;
color: #008800;
border: 2px solid;
border-color: #00cc00 #006600 #006600 #00cc00;
font-size: 11px;
font-weight: bold;
font-family: arial, sans-serif;
text-decoration: none;
line-height: 100%;
}
#menudemo02 a:hover,
#menudemo02 a:focus,
#menudemo02 a:active {
outline: none;
border-color: #006600 #00cc00 #00cc00 #006600;
color: #000066;
}

#menudemo03 {
list-style: none;
margin: 0;
padding: 4px 2px;
line-height: 100%;
background: #000;
height: 100%;
overflow: hidden;
clear: both;
}
#menudemo03 li {
float: left;
margin: 0 1px;
border: 1px solid;
border-color: #004400 #009900 #009900 #004400;
padding: 1px;
}
#menudemo03 a {
display: block;
padding: 2px;
background: #000;
color: #008800;
border: 2px solid;
border-color: #00cc00 #006600 #006600 #00cc00;
font-size: 11px;
font-weight: bold;
font-family: arial, sans-serif;
text-decoration: none;
line-height: 100%;
}
#menudemo03 a:hover,
#menudemo03 a:focus,
#menudemo03 a:active {
outline: none;
border-color: #006600 #00cc00 #00cc00 #006600;
color: #00cc00;
}