Menus / Boxes / Logos

Menu boxes with hidden info

An unusual menu in a form of a 2x2 items box, easy to turn into a horizontal or vertical one, each item with additional info revealed on hover.

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

<ul id="menudemo04">
<li id="menu01"><a href="#">menu link 1<span></span></a>
<span>This is a description</span></li>
<li id="menu02"><a href="#">menu link 2<span></span></a>
<span>An example text is placed here</span></li>
<li id="menu03"><a href="#">menu link 3<span></span></a>
<span>An example text is placed here</span></li>
<li id="menu04"><a href="#">menu link 4<span></span></a>
<span>This is a description</span></li>
</ul>

#menudemo04 {
font-family: trebuchet ms, sans-serif;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
line-height: 100%;
list-style: none;
width: 200px;
margin: 0;
padding: 0;
height: auto;
overflow: hidden;
}
#menudemo04 li {
width: 50%;
height: 50px;
float: left;
}
#menudemo04 a {
display: block;
width: 92px;
margin: 4px;
position: absolute;
background: #000;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 42px;
}
#menudemo04 a:hover {
opacity: 0;
filter: Alpha(Opacity=0);
}
#menudemo04 span {
display: block;
padding: 4px;
}
#menudemo04 a span {
overflow: hidden;
padding: 0;
position: absolute;
width: 8px;
height: 8px;
right: 0;
bottom: 0;
}
#menu01,
#menu04,
#menu01 a span,
#menu04 a span {
background: #2981d6;
}
#menu02,
#menu03,
#menu02 a span,
#menu03 a span {
background: #33cc33;
}

This is how to turn it into a horizontal menu...

#menudemo04 {
width: 400px;
}
#menudemo04 li {
width: 25%;
}
/* the values below are for maintaining the order of the colours only */
#menu01,
#menu03,
#menu01 a span,
#menu03 a span {
background: #2981d6;
}
#menu02,
#menu04,
#menu02 a span,
#menu04 a span {
background: #33cc33;
}

...and a vertical one.

#menudemo04 {
width: 100px;
}
#menudemo04 li {
width: 100%;
}
/* the values below are for maintaining the order of the colours only */
#menu01,
#menu03,
#menu01 a span,
#menu03 a span {
background: #2981d6;
}
#menu02,
#menu04,
#menu02 a span,
#menu04 a span {
background: #33cc33;
}