Menus / Boxes / Logos

Horizontal suckerfish menu with embedded 3rd level items

This time another level of depth has beed added (under micro) and instead of a traditional drop-down/fly-out approach I decided to embed it directly in the 2nd level drop-down. This method is useful when you're stuck with embedded unordered lists (often the case when using a CMS) but if you have the full control over markup, using a single definition list for the sub- and subsub-items will be much more practical (see example 2).

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="menudemo07">
<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>
<ul><li><a href="micro04.php">boys with toys</a>
<ul>
<li><a href="img/boyswithtoys/xro_boyswithtoys.7z">.gif blue</a></li>
<li><a href="img/boyswithtoys/xro_boyswithtoys_green.7z">.gif green</a></li>
</ul>
</li>
<li><a href="micro03.php">sugar and spice</a>
<ul>
<li><a href="img/sugarnspice/xro_sugarnspice.7z">.gif pink</a></li>
<li><a href="img/sugarnspice/xro_sugarnspice_blue.7z">.gif blue</a></li>
</ul>
</li>
<li><a href="micro02.php">hey girl, hey boy</a>
<ul>
<li><a href="img/emot/xro_boy_png.7z">.png boys</a></li>
<li><a href="img/emot/xro_boy_gif.7z">.gif boys</a></li>
<li><a href="img/emot/xro_girl_png.7z">.png girls</a></li>
<li><a href="img/emot/xro_girl_gif.7z">.gif girls</a></li>
</ul>
</li>
<li><a href="micro01.php">36 web icons</a>
<ul>
<li><a href="img/whiteround/xro_whiteround.7z">.png white</a></li>
<li><a href="img/blackshadow/xro_blackshadow.7z">.png black</a></li>
<li><a href="img/3dlumi/xro_3dlumi.7z">.png green</a></li>
</ul>
</li>
</ul>
</li>
</ul>

/* the structure */
* {
margin: 0;
padding: 0;
}
#menudemo07,
#menudemo07 ul {
list-style: none;
float: left;
border: 1px solid #fff;
}
#menudemo07 li {
position: relative;
float: left;
}
#menudemo07 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;
}
#menudemo07 li ul {
display: none;
}
#menudemo07 li:hover ul {
display: block;
position: absolute;
left: 50%;
top: 23px;
float: none;
margin: 0 0 0 -71px;
width: 140px;
}
#menudemo07 li:hover ul li {
clear: both;
}
#menudemo07 li:hover ul li ul {
position: static;
margin: 0;
clear: both;
width: 138px;
height: 100%;
overflow: hidden;
}
#menudemo07 li li a {
font-size: 11px;
font-weight: normal;
padding: 0 6px;
line-height: 18px;
width: 126px;
height: 18px;
}
#menudemo07 li li li 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;
}
#menudemo07 li li li 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,
#menudemo07 #microitem li li a:hover {
background-color: #0089af;
}
#menudemo07 a:hover {
background-color: #666;
}