Menus / Boxes / Logos

Vertical suckerfish menu

Due to popular demand, I present you now the first from the variations of the suckerfish menu - the vertical one. See example 2 for a menu with an additional level of depth.

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="menudemo05">
<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></li>
<li><a href="micro03.php">sugar and spice</a></li>
<li><a href="micro02.php">hey girl, hey boy</a></li>
<li><a href="micro01.php">36 web icons</a></li></ul>
</li>
</ul>


/* the structure */
* {
margin: 0;
padding: 0;
}
#menudemo05,
#menudemo05 ul {
list-style: none;
width: 150px;
border: 1px solid #fff;
}
#menudemo05 li {
position: relative;
/* a little something for IE */
line-height: 0;
}
#menudemo05 a {
color: #fff;
font-family: tahoma, sans-serif;
font-size: 11px;
text-decoration: none;
font-weight: normal;
display: block;
width: 138px;
border: 1px solid #fff;
padding: 0 5px;
line-height: 18px;
height: 18px;
}
#menudemo05 li ul {
display: none;
}
#menudemo05 li:hover ul {
display: block;
position: absolute;
left: 149px;
top: -1px;
}
/* and the colours */
#homeitem a {
background-color: #bf008c;
}
#maxiitem a {
background: #ff7f1e url('img/menuarrow.gif') right no-repeat;
}
#miniitem a {
background: #00b200 url('img/menuarrow.gif') right no-repeat;
}
#microitem a {
background: #0089af url('img/menuarrow.gif') right no-repeat;
}
#menudemo05 a:hover {
background-color: #666;
}
#menudemo05 li li a {
background-image: none;
}