Menus / Boxes / Logos

Definition list based menu boxes

This is how to make use of definition lists to create vertical menu boxes with titles and save on mark-up.

You may use it freely for any purpose without seeking my permission.
A link back to would be greatly appreciated.

<dl class="menudemo04">
<dt>this is a menu title</dt>
<dd><a href="#">menu link 1</a></dd>
<dd><a href="#">menu link 2</a></dd>
<dd><a href="#">menu link 3</a></dd>
<dd><a href="#">menu link 4</a></dd>
<dd><a href="#">menu link 5</a></dd>
</dl>
<dl class="menudemo04" id="greenbox">
<dt>this is a menu title</dt>
<dd><a href="#">menu link 1</a></dd>
<dd><a href="#">menu link 2</a></dd>
<dd><a href="#">menu link 3</a></dd>
<dd><a href="#">menu link 4</a></dd>
<dd><a href="#">menu link 5</a></dd>
</dl>
<dl class="menudemo04" id="turqbox">
<dt>this is a menu title</dt>
<dd><a href="#">menu link 1</a></dd>
<dd><a href="#">menu link 2</a></dd>
<dd><a href="#">menu link 3</a></dd>
<dd><a href="#">menu link 4</a></dd>
<dd><a href="#">menu link 5</a></dd>
</dl>

.menudemo04 {
width: 140px;
margin: 0 4px 0 0;
padding: 1px;
border: 1px solid #99ccf2;
background: #fff;
float: left;
}
.menudemo04 dt {
margin: 0;
background: #72bff2;
border-top: 4px solid #99ccf2;
border-bottom: 4px solid #59b2f2;
font-family: trebuchet ms, sans-serif;
font-size: 12px;
font-weight: bold;
color: #fff;
line-height: 16px;
text-align: center;
}
.menudemo04 dd {
margin: 1px 0 0 0;
font-size: 11px;
line-height: 16px;
text-indent: 6px;
}
.menudemo04 a {
font-family: trebuchet ms, sans-serif;
color: #3298e5;
text-decoration: none;
display: block;
background: #d1eaf7;
}
.menudemo04 a:hover {
color: #72bff2;
background: #fff;
}
/* colour variations start here */
#greenbox {
border: 1px solid #ffcc99;
}
#greenbox dt {
background: #ff9933;
border-top: 4px solid #ffcc99;
border-bottom: 4px solid #ff7f00;
}
#greenbox a {
color: #ff7f00;
background: #ffe5cc;
}
#greenbox a:hover {
color: #ffcc99;
background: #fff;
}
#turqbox {
border: 1px solid #7fbfbf;
}
#turqbox dt {
background: #00a6a6;
border-top: 4px solid #7fbfbf;
border-bottom: 4px solid #009999;
}
#turqbox a {
color: #009999;
background: #d1d9d9;
}
#turqbox a:hover {
color: #7fbfbf;
background: #fff;
}