Menus / Boxes / Logos

A horizontal pure-css menu

A horizontal pure-css menu with a focus (outline removed), variable width items, easy to customize and implement.

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

<ul id="menudemo01">
<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>

#menudemo01 {
list-style: none;
width: auto;
height: 100%;
overflow: hidden;
margin: 0;
padding: 4px 0 4px 4px;
background: #fff;
}
#menudemo01 li {
float: left;
padding: 0 4px 0 0;
margin: 0;
}
#menudemo01 a {
font-family: impact, sans-serif;
font-size: 14px;
font-weight: normal;
text-decoration: none;
text-transform: uppercase;
color: #000;
line-height: 14px;
display: block;
border: solid #0060c0;
border-width: 1px 0 6px 0;
margin: 0;
padding: 0;
}
#menudemo01 a:hover {
border-width: 6px 0 1px 0;
}
#menudemo01 a:focus,
#menudemo01 a:active {
outline: none;
color: #ff0000;
border-width: 6px 0 1px 0;
}