Menus / Boxes / Logos
Vertical suckerfish menu
This is a horizontal fly-out menu with 3 levels 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="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;
}
#menudemo05a {
float: left;
position: relative;
z-index: 3;
}
#menudemo05a,
#menudemo05a ul {
list-style: none;
width: 150px;
border: 1px solid #fff;
}
#menudemo05a li {
position: relative;
/* a little something for IE */
line-height: 0;
}
#menudemo05a 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;
}
#menudemo05a li ul,
#menudemo05a li:hover ul li ul {
display: none;
}
#menudemo05a li:hover ul,
#menudemo05a li:hover ul 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;
}
#menudemo05a a:hover {
background-color: #666;
}
#maxiitem:hover a,
#miniitem:hover a,
#microitem:hover a {
background-image: url('img/menuarrow.gif');
background-repeat: no-repeat;
background-position: right;
}
#maxiitem:hover li a,
#miniitem:hover li a,
#microitem:hover li li a {
background-image: none;
}
Got any comments? Found errors? Want to contribute to the site? Why not write to me?
