Menus / Boxes / Logos

To the point(er)

Here's a horizontal menu with a pointer. It's set to be the width of the element that contains it and the items adjust their width to the contents. The pointer appears centered below each element once you hover it.

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.

<dl id="menudemo11">
<dd><a href="#">1st menu link</a><span class="pointer"><img src="img/menupointer.gif" alt="pointer" /></span></dd>
<dd><a href="#">2nd menu link</a><span class="pointer"><img src="img/menupointer.gif" alt="pointer" /></span></dd>
<dd><a href="#">another link</a><span class="pointer"><img src="img/menupointer.gif" alt="pointer" /></span></dd>
<dd><a href="#">the last link</a><span class="pointer"><img src="img/menupointer.gif" alt="pointer" /></span></dd>
<dt>navigate<span class="pointer"><img src="img/menupointer.gif" alt="pointer" /></span></dt>
</dl>

* {
margin: 0;
padding: 0;
}
#menudemo11 {
list-style: none;
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
position: relative;
}
#menudemo11 dd,
#menudemo11 dt {
font-family: arial, sans-serif;
font-size: 10px;
letter-spacing: 1px;
color: #fff;
float: left;
padding: 16px 0 32px 0;
margin: 0 -16px 0 0;
background: url('img/menushadow.gif') bottom no-repeat;
position: relative;
/* little something for IE */
display: inline;
}
#menudemo11 dd:hover {
z-index: 1;
}
#menudemo11 a {
text-decoration: none;
color: #fff;
line-height: 16px;
float: left;
padding: 0 16px;
border-bottom: 1px solid #fff;
outline: none;
}
#menudemo11 a:hover {
color: #4CCED1;
}
#menudemo11 dd .pointer {
display: none;
}
#menudemo11 dd:hover .pointer,
#menudemo11 dt .pointer {
display: block;
position: absolute;
z-index: 1;
left: 50%;
top: 32px;
width: 2000px;
padding: 3px 0 0 0;
background: url('img/menudots.gif') repeat-x;
}
#menudemo11 dt {
line-height: 16px;
border-bottom: 1px solid #fff;
padding: 16px 16px 0 16px;
color: #4CCED1;
background: none;
}
#menudemo11 dt .pointer {
display: block;
border-top: 1px solid #4CCED1;
padding: 2px 0 0 0;
background: none;
z-index: 2;
}
#menudemo11 dd img,
#menudemo11 dt img {
display: block;
border: 0;
position: relative;
left: -3px;
}
#menudemo11 dt:hover img {
display: block;
}