maxi
mini
micro
home

Menus / Boxes / Logos

Horizontal menu with subitems and section descriptions

A horizontal menu with subitems on top and a short description at the bottom, accomplished by using a combination of an unordered list and definition lists.

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 xro resources would be greatly appreciated.

<head>
<!--[if IE]>
<style type="text/css">
#menudemo08 a {float: left;}
#menudemo08 dl {width: 456px;}
</style>
<![endif]-->
</head>
<body>
<ul id="menudemo08">
<li id="homeitem"><a href="index.php">home</a></li>
<li id="maxiitem"><a href="maxi.php">maxi</a>
<dl>
<dt>layouts, splash pages</dt>
<dd><a href="maxi05.php">purple goodiebag</a></dd>
<dd><a href="maxi04.php">3col equal height</a></dd>
<dd><a href="maxi03.php">tabbed splash page</a></dd>
<dd><a href="maxi02.php">3col stretchable</a></dd>
<dd><a href="maxi01.php">3col fixed</a></dd>
</dl>
</li>
<li id="miniitem"><a href="mini.php">mini</a>
<dl>
<dt>menus, drop-downs, boxes</dt>
<dd><a href="mini04.php">definition list boxes</a></dd>
<dd><a href="mini03.php">boxes with hidden info</a></dd>
<dd><a href="mini02.php">button-like items</a></dd>
<dd><a href="mini01.php">horizontal with focus</a></dd>
</dl>
</li>
<li id="microitem"><a href="micro.php">micro</a>
<dl>
<dt>icons, emoticons</dt>
<dd><a href="micro04.php">boys with toys</a></dd>
<dd><a href="micro03.php">sugar and spice</a></dd>
<dd><a href="micro02.php">hey girl, hey boy</a></dd>
<dd><a href="micro01.php">36 web icons</a></dd>
</dl>
</li>
</ul>
</body>

/* the structure */
* {
margin: 0;
padding: 0;
}
#menudemo08 {
position: relative;
list-style: none;
border: solid #ddd;
border-width: 20px 0;
padding: 0 1px;
height: 26px;
background: #fff;
}
#menudemo08 li,
#menudemo08 dd {
float: left;
}
#menudemo08 li {
border: solid #fff;
border-width: 1px 0;
}
#menudemo08 ul {
list-style: none;
border: 1px solid #fff;
}
#menudemo08 a {
color: #fff;
font-family: tahoma, sans-serif;
font-size: 14px;
text-decoration: none;
font-weight: bold;
display: block;
border: 1px solid #fff;
line-height: 22px;
height: 22px;
padding: 0 12px;
}
#menudemo08 li dl {
display: none;
}
#menudemo08 li:hover dl {
display: block;
position: absolute;
left: 0;
top: -20px;
background: #fff;
border: 1px solid #fff;
}
#menudemo08 li dt {
position: absolute;
left: -1px;
bottom: -45px;
line-height: 22px;
background: #fff;
font-family: tahoma, sans-serif;
color: #666;
font-weight: bold;
font-size: 12px;
padding: 0 10px;
}
#menudemo08 li dd a {
font-size: 11px;
font-weight: normal;
padding: 0 6px;
border: 1px solid #fff;
line-height: 18px;
height: 18px;
}
/* and the colours */
#homeitem a {
background-color: #bf008c;
}
#maxiitem a {
background-color: #ff7f1e;
}
#miniitem a {
background-color: #00b200;
}
#microitem a {
background-color: #0089af;
}
#menudemo08 a:hover {
background-color: #666;
}

Got any comments? Found errors? Want to contribute to the site? Why not write to me?

Copyleft 2006 by XRO. All Rights Reversed