Menus / Boxes / Logos

Plug & Play vertical menu

Unlike in the previous examples, where elements containing submenu lists were marked with IDs to which arrows were assigned, this one is based on class/ID-free unordered lists embedded in each other. Only the main list holding it all together has an ID assigned, the rest is pure cascading bliss. The arrows appear automatically only in the elements with subitems. Additionally, the parent items remain highlighted while the subitems are being browsed. The fly-out menu implementation has never been easier!

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="menudemo12"> <li><a href="index.php">home</a></li> <li><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><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><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>

* { margin: 0; padding: 0; } #menudemo12 { float: left; } #menudemo12, #menudemo12 ul { list-style: none; width: 150px; } #menudemo12 li { position: relative; line-height: 0; /* fix for IE */ margin: 0 0 -2px 0; } #menudemo12 a, #menudemo12 li:hover li a, #menudemo12 li:hover li:hover li a { color: #fff; background-color: #bf008c; border: 2px solid #fff; font-family: tahoma, sans-serif; font-size: 11px; text-decoration: none; font-weight: normal; display: block; width: 138px; padding: 0 5px; line-height: 18px; height: 18px; } #menudemo12 li:hover a, #menudemo12 li:hover li:hover a, #menudemo12 li:hover li:hover li:hover a { background: #666; } #menudemo12 li ul, #menudemo12 li:hover ul li ul { height: 16px; width: 0; overflow: hidden; position: absolute; left: 134px; top: 0; background: url('img/menuarrow.gif') 0 8px no-repeat; padding: 0 0 0 16px; } #menudemo12 li:hover ul, #menudemo12 li:hover ul li:hover ul { width: 138px; height: auto; overflow: visible; z-index:1; /* fix for Opera v9.25 and lower */ }