转自：http://www.cnblogs.com/yzst/archive/2011/10/10/2205548.html
<html >
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>下拉菜单的制作</title>
</head>
<style
type="text/css">
#menu{
margin:0;
padding:0;
width:800px;
list-style-type:none;
font:14px
"宋体";
}
#menu
li{
float:left;
width:150px;
padding:0;
margin:0
1px 0 0;
}
#menu li
dl{
margin:0;
padding:0 0 10px
0;
background:#cb6 url(bottom.gif) no-repeat bottom
left;
}
#menu li dl
dt{
margin:0;
padding:5px;
text-align:center;
border-bottom:1px
solid red;
background:#ed8 url(top.gif) no-repeat top
left;
}
#menu li dl
dt.red{
background-color:red;
}
#menu
li dl
dt.green{
background-color:green;
}
#menu
li dl
dt.yellow{
background-color:yellow;
}
#menu
li dl
dt.pink{
background-color:pink;
}
#menu
li dl
dt.orange{
background-color:orange;
}
#menu
dt a,#menu dt
a:visited{
display:block;
color:#333;
text-decoration:none;
}
#menu
li
dd{
display:none;
margin:0;
padding:0;
color:#fff;
background:#47a;
}
#menu
li dl dd a,#menu li dl dd
a:visited{
display:block;
text-decoration:none;
color:#fff;
text-indent:10px;
padding:4px
5px 4px 20px;
background:#47a url(a.gif) no-repeat 10px
0px;
}
#menu li dl
dd.last{
border-bottom: 1px solid
red;
}
#menu li:hover
dd{
display:block;
}
#menu
li dl dd
a:hover{
background-color:#147;
color:#9cf;
}
</style>
</head>
<body>
<ul
id="menu">
<li>
<dl>
<dt class="red"><a
href="#">北京市的大学</a></dt>
<dd><a
href="#">清华大学</a></dd>
<dd><a
href="#">北京大学</a></dd>
<dd class="last"><a
href="#">人民大学</a></dd>
</dl>
</li>
<li>
<dl>
<dt class="green"><a
href="#">徐州市的大学</a></dt>
<dd><a
href="#">矿业大学</a></dd>
<dd><a
href="#">师范大学</a></dd>
<dd class="last"><a
href="#">人民大学</a></dd>
</dl>
</li>
<li>
<dl>
<dt class="yellow"><a
href="#">上海市的大学</a></dt>
<dd><a
href="#">复旦大学</a></dd>
<dd><a
href="#">交通大学</a></dd>
<dd class="last"><a
href="#">上海大学</a></dd>
</dl>
</li>
<li>
<dl>
<dt
class="pink"><a
href="#">南京市的大学</a></dt>
<dd><a
href="#">南京大学</a></dd>
<dd><a
href="#">理工大学</a></dd>
<dd class="last"><a
href="#">航天大学</a></dd>
</dl>
</li>
<li>
<dl>
<dt class="orange"><a
href="#">武汉市的大学</a></dt>
<dd><a
href="#">武汉大学</a></dd>
<dd><a
href="#">理工大学</a></dd>
<dd class="last"><a
href="#">电大大学</a></dd>
</dl>
</li>
</ul>
</body>
</html>
原文：http://www.cnblogs.com/cugwx/p/3590514.html