Menus / Boxes / Logos

Horizontal suckerfish menu with embedded 3rd level items

A combination of an unordered list and a definition list for subitems.

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="menudemo07a">
<li id="homeitem"><a href="index.php">home</a></li>
<li id="maxiitem"><a href="maxi.php">maxi</a>
<ul>
<li><a href="maxi05.php">purple goodiebag</a></li>
<li><a href="maxi04.php">3col equal height</a></li>
<li><a href="maxi03.php">tabbed splash page</a></li>
<li><a href="maxi02.php">3col stretchable</a></li>
<li><a href="maxi01.php">3col fixed</a></li>
</ul>
</li>
<li id="miniitem"><a href="mini.php">mini</a>
<ul>
<li><a href="mini04.php">definition list boxes</a></li>
<li><a href="mini03.php">boxes with hidden info</a></li>
<li><a href="mini02.php">button-like items</a></li>
<li><a href="mini01.php">horizontal with focus</a></li>
</ul>
</li>
<li id="microitem"><a href="micro.php">micro</a>
<dl>
<dt><a href="micro04.php">boys with toys</a></dt>
<dd><a href="img/boyswithtoys/xro_boyswithtoys.7z">.gif blue</a></dd>
<dd><a href="img/boyswithtoys/xro_boyswithtoys_green.7z">.gif green</a></dd>
<dt><a href="micro03.php">sugar and spice</a></dt>
<dd><a href="img/sugarnspice/xro_sugarnspice.7z">.gif pink</a></dd>
<dd><a href="img/sugarnspice/xro_sugarnspice_blue.7z">.gif blue</a></dd>
<dt><a href="micro02.php">hey girl, hey boy</a></dt>
<dd><a href="img/emot/xro_boy_png.7z">.png boys</a></dd>
<dd><a href="img/emot/xro_boy_gif.7z">.gif boys</a></dd>
<dd><a href="img/emot/xro_girl_png.7z">.png girls</a></dd>
<dd><a href="img/emot/xro_girl_gif.7z">.gif girls</a></dd>
<dt><a href="micro01.php">36 web icons</a></dt>
<dd><a href="img/whiteround/xro_whiteround.7z">.png white</a></dd>
<dd><a href="img/blackshadow/xro_blackshadow.7z">.png black</a></dd>
<dd><a href="img/3dlumi/xro_3dlumi.7z">.png green</a></dd>
</dl>
</li>
</ul>

/* the structure */
* {
margin: 0;
padding: 0;
}
#menudemo07a,
#menudemo07a ul {
list-style: none;
float: left;
border: 1px solid #fff;
}
#menudemo07a li {
position: relative;
float: left;
}
#menudemo07a a {
color: #fff;
font-family: tahoma, sans-serif;
font-size: 14px;
text-decoration: none;
font-weight: bold;
display: block;
float: left;
border: 1px solid #fff;
line-height: 22px;
height: 22px;
padding: 0 12px;
}
#menudemo07a li ul,
#menudemo07a li dl {
display: none;
}
#menudemo07a li:hover ul,
#menudemo07a li:hover dl {
display: block;
position: absolute;
left: 50%;
top: 23px;
float: none;
margin: 0 0 0 -71px;
width: 140px;
border: 1px solid #fff;
}
#menudemo07a li:hover dl {
border-width: 0 1px 2px 1px;
}
#menudemo07a dt a {
border: solid #fff;
border-width: 2px 1px;
}
#menudemo07a li li {
position: static;
}
#menudemo07a li li a,
#menudemo07a dl a {
font-size: 11px;
font-weight: normal;
padding: 0 6px;
line-height: 18px;
width: 126px;
height: 18px;
}
#menudemo07a dd a {
border: 0;
opacity: .8;
filter: Alpha(Opacity=80);
background-image: url('img/menuarrow.gif');
background-position: left;
background-repeat: no-repeat;
padding: 0 0 0 12px;
border: solid #fff;
border-width: 0 1px;
}
#menudemo07a dd a:hover {
opacity: 1;
filter: Alpha(Opacity=100);
}
/* and the colours */
#homeitem a {
background-color: #bf008c;
}
#maxiitem a {
background-color: #ff7f1e;
}
#miniitem a {
background-color: #00b200;
}
#microitem a {
background-color: #0089af;
}
#menudemo07a #microitem dd a:hover {
background-color: #0089af;
}
#menudemo07a li a:hover,
#menudemo07a dt a:hover {
background-color: #666;
}