Menus / Boxes / Logos

Horizontal suckerfish menu

This is how to transform the exact same structure as in the previous example to a horizontal drop-down menu. 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="menudemo06"> <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; } #menudemo06, #menudemo06 ul { list-style: none; float: left; border: 1px solid #fff; } #menudemo06 li { position: relative; float: left; } #menudemo06 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; } #menudemo06 li ul { display: none; } #menudemo06 li:hover ul { display: block; position: absolute; left: 50%; top: 23px; margin: 0 0 0 -71px; width: 140px; } #menudemo06 li li { float: none; } #menudemo06 li li a { float: none; font-size: 11px; font-weight: normal; padding: 0 6px; line-height: 18px; height: 18px; } /* and the colours */ #homeitem a { background-color: #bf008c; } #maxiitem a { background: #ff7f1e; } #miniitem a { background: #00b200; } #microitem a { background: #0089af; } #menudemo06 a:hover { background-color: #666; }