Menus / Boxes / Logos

Horizontal fixed-width menu with flexible items v2.1

Still experimenting with the use of the :hover pseudoclass, this is a very simple horizontal menu where the hovered item stretches and the others shrink to maintain the menu's width.

Note that in order for the menu to fully work in IE<7 you will need to use JavaScript (for example the whatever:hover hack).

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

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

* {
margin: 0;
padding: 0;
}
#menudemo09 {
list-style: none;
float: left;
height: 28px;
border: solid #fff;
border-width: 0 1px;
background: #fff;
}
#menudemo09 li {
float: left;
width: 80px;
text-align: center;
font-size: 11px;
font-family: tahoma, sans-serif;
line-height: 24px;
background: #0089af url('img/menuarrows.gif') center no-repeat;
}
#menudemo09:hover li {
width: 60px;
letter-spacing: -1px;
}
#menudemo09 li:hover {
width: 160px;
background-color: #ff7f1e;
letter-spacing: 2px;
}
#menudemo09 a {
display: block;
letter-spacing: -1px;
border: solid #fff;
border-width: 2px 1px;
text-decoration: none;
color: #fff;
}